ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 20:35:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #17941 from silentoplayz/vertical-and-horizontal-overview

Browse source 
feat: Implement toggling for vertical and horizontal flow layouts
This commit is contained in:
Tim Jaeryang Baek 2025-10-01 19:27:13 -05:00 committed by GitHub
commit 2f923e47ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/lib/components/chat/Overview.svelte
View file

@ -29,12 +29,14 @@
const nodes = writable([]);
const edges = writable([]);
let layoutDirection = 'vertical';
const nodeTypes = {
custom: CustomNode
};
$: if (history) {
drawFlow();
drawFlow(layoutDirection);
}
$: if (history && history.currentId) {
@ -51,11 +53,11 @@
selectedMessageId = null;
};
const drawFlow = async () => {
const drawFlow = async (direction) => {
const nodeList = [];
const edgeList = [];
const levelOffset = 150; // Vertical spacing between layers
const siblingOffset = 250; // Horizontal spacing between nodes at the same layer
const levelOffset = direction === 'vertical' ? 150 : 300;
const siblingOffset = direction === 'vertical' ? 250 : 150;
// Map to keep track of node positions at each level
let positionMap = new Map();
@ -84,9 +86,8 @@
// Adjust positions based on siblings count to centralize vertical spacing
Object.keys(history.messages).forEach((id) => {
const pos = positionMap.get(id);
const xOffset = pos.position * siblingOffset;
const y = pos.level * levelOffset;
const x = xOffset;
const x = direction === 'vertical' ? pos.position * siblingOffset : pos.level * levelOffset;
const y = direction === 'vertical' ? pos.level * levelOffset : pos.position * siblingOffset;
nodeList.push({
id: pos.id,
@ -126,8 +127,13 @@
);
};
const setLayoutDirection = (direction) => {
layoutDirection = direction;
drawFlow(layoutDirection);
};
onMount(() => {
drawFlow();
drawFlow(layoutDirection);
nodesInitialized.subscribe(async (initialized) => {
if (initialized) {
@ -188,6 +194,7 @@
{nodes}
{nodeTypes}
{edges}
{setLayoutDirection}
on:nodeclick={(e) => {
console.log(e.detail.node.data);
dispatch('nodeclick', e.detail);

22
src/lib/components/chat/Overview/Flow.svelte
View file

@ -4,11 +4,20 @@
const dispatch = createEventDispatcher();
import { theme } from '$lib/stores';
import { Background, Controls, SvelteFlow, BackgroundVariant } from '@xyflow/svelte';
import {
Background,
Controls,
SvelteFlow,
BackgroundVariant,
ControlButton
} from '@xyflow/svelte';
import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
import Bars3BottomLeft from '$lib/components/icons/Bars3BottomLeft.svelte';
export let nodes;
export let nodeTypes;
export let edges;
export let setLayoutDirection;
</script>
<SvelteFlow
@ -31,6 +40,13 @@
console.log('Flow initialized');
}}
>
<Controls showLock={false} />
<Controls showLock={false}>
<ControlButton on:click={() => setLayoutDirection('vertical')} title="Vertical Layout">
<BarsArrowUp class="size-4" />
</ControlButton>
<ControlButton on:click={() => setLayoutDirection('horizontal')} title="Horizontal Layout">
<Bars3BottomLeft class="size-4" />
</ControlButton>
</Controls>
<Background variant={BackgroundVariant.Dots} />
</SvelteFlow>
</SvelteFlow>