ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-27 07:54:55 -06:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-27 01:32:41 -04:00
parent 8a90bf6256
commit 067cf31f40
5 changed files with 73 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/ChatControls.svelte
-2
View File
@@ -372,7 +372,6 @@
const node = e.node;
showMessage(node.data.message, true);
}}
onClose={() => showControls.set(false)}
/>
{:else if activeTab === 'files' && $selectedTerminalId}
<FileNav onAttach={handleTerminalAttach} {chatId} />
@@ -522,7 +521,6 @@
}
showMessage(node.data.message, true);
}}
onClose={() => showControls.set(false)}
/>
{:else if activeTab === 'files' && $selectedTerminalId}
<FileNav onAttach={handleTerminalAttach} overlay={dragged} {chatId} />
src/lib/components/chat/Overview.svelte
+2 -7
View File
@@ -1,17 +1,12 @@
<script lang="ts">
import { getContext, createEventDispatcher, onDestroy } from 'svelte';
import { useSvelteFlow, useNodesInitialized, useStore, SvelteFlowProvider } from '@xyflow/svelte';
const dispatch = createEventDispatcher();
import { SvelteFlowProvider } from '@xyflow/svelte';
import View from './Overview/View.svelte';
export let history;
export let onClose;
export let onNodeClick;
</script>
<SvelteFlowProvider>
<View {history} {onClose} {onNodeClick} />
<View {history} {onNodeClick} />
</SvelteFlowProvider>
src/lib/components/chat/Overview/Flow.svelte
+15 -2
View File
@@ -1,7 +1,9 @@
<script>
import { createEventDispatcher } from 'svelte';
import { getContext } from 'svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
import { theme } from '$lib/stores';
import {
@@ -11,15 +13,16 @@
BackgroundVariant,
ControlButton
} from '@xyflow/svelte';
import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
import Bars3BottomLeft from '$lib/components/icons/Bars3BottomLeft.svelte';
import AlignVertical from '$lib/components/icons/AlignVertical.svelte';
import AlignHorizontal from '$lib/components/icons/AlignHorizontal.svelte';
import Pin from '$lib/components/icons/Pin.svelte';
import PinSlash from '$lib/components/icons/PinSlash.svelte';
export let nodes;
export let nodeTypes;
export let edges;
export let setLayoutDirection;
export let pinned = false;
</script>
<SvelteFlow
@@ -43,6 +46,16 @@
}}
>
<Controls showLock={false}>
<ControlButton
on:click={() => (pinned = !pinned)}
title={pinned ? $i18n.t('Viewport Pinned') : $i18n.t('Viewport Unpinned')}
>
{#if pinned}
<Pin />
{:else}
<PinSlash />
{/if}
</ControlButton>
<ControlButton on:click={() => setLayoutDirection('vertical')} title="Vertical Layout">
<AlignVertical className="size-4" />
</ControlButton>
src/lib/components/chat/Overview/Node.svelte
+2 -2
View File
@@ -33,7 +33,7 @@
src={`${WEBUI_API_BASE_URL}/users/${data.user.id}/profile/image`}
className={'size-5 -translate-y-[1px] flex-shrink-0'}
/>
<div class="ml-2">
<div class="ml-2 flex-1 min-w-0">
<div class=" flex justify-between items-center">
<div class="text-xs text-black dark:text-white font-normal line-clamp-1">
{data?.user?.name ?? 'User'}
@@ -54,7 +54,7 @@
className={'size-5 -translate-y-[1px] flex-shrink-0'}
/>
<div class="ml-2">
<div class="ml-2 flex-1 min-w-0">
<div class=" flex justify-between items-center">
<div class="text-xs text-black dark:text-white font-normal line-clamp-1">
{data?.model?.name ?? data?.message?.model ?? 'Assistant'}
src/lib/components/chat/Overview/View.svelte
+54 -52
View File
@@ -1,37 +1,43 @@
<script lang="ts">
import { getContext, createEventDispatcher, onDestroy } from 'svelte';
import { useSvelteFlow, useNodesInitialized, useStore } from '@xyflow/svelte';
const dispatch = createEventDispatcher();
const i18n = getContext('i18n');
import { onMount, tick } from 'svelte';
import {
useSvelteFlow,
useNodesInitialized,
useStore,
type Edge,
type Node
} from '@xyflow/svelte';
import { writable } from 'svelte/store';
import { models, theme, user } from '$lib/stores';
import { models, user } from '$lib/stores';
import '@xyflow/svelte/dist/style.css';
import CustomNode from './Node.svelte';
import Flow from './Flow.svelte';
import XMark from '../../icons/XMark.svelte';
import ArrowLeft from '../../icons/ArrowLeft.svelte';
const { width, height } = useStore();
const { fitView, getViewport } = useSvelteFlow();
const { fitView } = useSvelteFlow();
const nodesInitialized = useNodesInitialized();
export let history;
export let onClose;
export let onNodeClick;
let selectedMessageId = null;
type LayoutDirection = 'vertical' | 'horizontal';
type PositionMapEntry = {
id: string;
level: number;
position: number;
};
const nodes = writable([]);
const edges = writable([]);
let selectedMessageId: string | null = null;
let pinned = false;
let layoutDirection = 'vertical';
const nodes = writable<Node[]>([]);
const edges = writable<Edge[]>([]);
let layoutDirection: LayoutDirection = 'vertical';
const nodeTypes = {
custom: CustomNode
@@ -41,7 +47,7 @@
drawFlow(layoutDirection);
}
$: if (history && history.currentId) {
$: if (history && history.currentId && !pinned) {
focusNode();
}
@@ -55,23 +61,17 @@
selectedMessageId = null;
};
const drawFlow = async (direction) => {
const nodeList = [];
const edgeList = [];
const drawFlow = async (direction: LayoutDirection) => {
const nodeList: Node[] = [];
const edgeList: Edge[] = [];
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();
// Helper function to truncate labels
function createLabel(content) {
const maxLength = 100;
return content.length > maxLength ? content.substr(0, maxLength) + '...' : content;
}
let positionMap = new Map<string, PositionMapEntry>();
// Create nodes and map children to ensure alignment in width
let layerWidths = {}; // Track widths of each layer
let layerWidths: Record<number, number> = {}; // Track widths of each layer
Object.keys(history.messages).forEach((id) => {
const message = history.messages[id];
@@ -125,15 +125,15 @@
await nodes.set([...nodeList]);
};
const recurseCheckChild = (nodeId, currentId) => {
const recurseCheckChild = (nodeId: string, currentId: string): boolean => {
const node = history.messages[nodeId];
return (
node.childrenIds &&
node.childrenIds.some((id) => id === currentId || recurseCheckChild(id, currentId))
node.childrenIds.some((id: string) => id === currentId || recurseCheckChild(id, currentId))
);
};
const setLayoutDirection = (direction) => {
const setLayoutDirection = (direction: LayoutDirection) => {
layoutDirection = direction;
drawFlow(layoutDirection);
};
@@ -141,33 +141,31 @@
onMount(() => {
drawFlow(layoutDirection);
nodesInitialized.subscribe(async (initialized) => {
if (initialized) {
const stopNodesInitialized = nodesInitialized.subscribe(async (initialized) => {
if (initialized && !pinned) {
await tick();
const res = await fitView({ nodes: [{ id: history.currentId }] });
await fitView({ nodes: [{ id: history.currentId }] });
}
});
width.subscribe((value) => {
if (value) {
// fitView();
const stopWidth = width.subscribe((value) => {
if (value && !pinned) {
fitView({ nodes: [{ id: history.currentId }] });
}
});
const stopHeight = height.subscribe((value) => {
if (value && !pinned) {
fitView({ nodes: [{ id: history.currentId }] });
}
});
height.subscribe((value) => {
if (value) {
// fitView();
fitView({ nodes: [{ id: history.currentId }] });
}
});
});
onDestroy(() => {
console.log('Overview destroyed');
nodes.set([]);
edges.set([]);
return () => {
console.log('Overview destroyed');
stopNodesInitialized();
stopWidth();
stopHeight();
nodes.set([]);
edges.set([]);
};
});
</script>
@@ -178,10 +176,14 @@
{nodeTypes}
{edges}
{setLayoutDirection}
bind:pinned
on:nodeclick={(e) => {
onNodeClick(e.detail);
selectedMessageId = e.detail.node.data.message.id;
fitView({ nodes: [{ id: selectedMessageId }] });
const clickedMessageId = e.detail.node.data.message.id as string;
selectedMessageId = clickedMessageId;
if (!pinned) {
fitView({ nodes: [{ id: clickedMessageId }] });
}
}}
/>
{/if}