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

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

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

@ -4,11 +4,20 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import { theme } from '$lib/stores'; 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 nodes;
export let nodeTypes; export let nodeTypes;
export let edges; export let edges;
export let setLayoutDirection;
</script> </script>
<SvelteFlow <SvelteFlow
@ -31,6 +40,13 @@
console.log('Flow initialized'); 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} /> <Background variant={BackgroundVariant.Dots} />
</SvelteFlow> </SvelteFlow>