From 5fadd0fe1807b3f8e4e63e13d07e21e8314ca2e8 Mon Sep 17 00:00:00 2001 From: Aleksander Grygier Date: Fri, 28 Nov 2025 15:39:47 +0100 Subject: [PATCH] refactor: Components naming --- ...tecture.md => high-level-architecture.mmd} | 70 +++++++++---------- .../ChatFormActions/ChatFormActions.svelte | 6 +- .../ChatMessages/ChatMessageAssistant.svelte | 8 +-- .../webui/src/lib/components/app/index.ts | 4 +- .../ModelBadge.svelte} | 0 .../ModelsSelector.svelte} | 0 6 files changed, 43 insertions(+), 45 deletions(-) rename tools/server/webui/docs/{high-level-architecture.md => high-level-architecture.mmd} (89%) rename tools/server/webui/src/lib/components/app/{misc/BadgeModelName.svelte => models/ModelBadge.svelte} (100%) rename tools/server/webui/src/lib/components/app/{misc/SelectorModel.svelte => models/ModelsSelector.svelte} (100%) diff --git a/tools/server/webui/docs/high-level-architecture.md b/tools/server/webui/docs/high-level-architecture.mmd similarity index 89% rename from tools/server/webui/docs/high-level-architecture.md rename to tools/server/webui/docs/high-level-architecture.mmd index 724478b3c2..36e1413818 100644 --- a/tools/server/webui/docs/high-level-architecture.md +++ b/tools/server/webui/docs/high-level-architecture.mmd @@ -1,10 +1,9 @@ -```mermaid flowchart TB - subgraph Routes["📍 Routes"] - R1["/ (+page.svelte)"] - R2["/chat/[id]"] - RL["+layout.svelte"] - end +subgraph Routes["📍 Routes"] +R1["/ (+page.svelte)"] +R2["/chat/[id]"] +RL["+layout.svelte"] +end subgraph Components["🧩 Components"] direction TB @@ -12,13 +11,12 @@ flowchart TB C_Sidebar["ChatSidebar"] C_Screen["ChatScreen"] end - subgraph ChatComponents["Chat"] + subgraph ChatUIComponents["Chat UI"] C_Form["ChatForm"] C_Messages["ChatMessages"] C_Message["ChatMessage"] - end - subgraph ControlComponents["Controls"] - C_SelectorModel["SelectorModel"] + C_Attach["ChatAttachments"] + C_ModelsSelector["ModelsSelector"] C_Settings["ChatSettings"] end end @@ -47,9 +45,9 @@ flowchart TB S2Utils["Utilities:
setTitleUpdateConfirmationCallback()"] end subgraph S3["modelsStore"] - S3State["State:
models, routerModels
selectedModelId
selectedModelName
loading, updating, error
modelUsage
modelLoadingStates
modelPropsCache
modelPropsFetching"] - S3Getters["Computed Getters:
selectedModel
loadedModelIds
loadingModelIds"] - S3Modal["Modalities:
getModelModalities()
modelSupportsVision()
modelSupportsAudio()
getModelProps()
updateModelModalities()"] + S3State["State:
models, routerModels
selectedModelId
selectedModelName
loading, updating, error
modelUsage
modelLoadingStates
modelPropsCache
modelPropsFetching
propsCacheVersion"] + S3Getters["Computed Getters:
selectedModel
loadedModelIds
loadingModelIds
singleModelName"] + S3Modal["Modalities:
getModelModalities()
modelSupportsVision()
modelSupportsAudio()
getModelModalitiesArray()
getModelProps()
updateModelModalities()"] S3Status["Status Queries:
isModelLoaded()
isModelOperationInProgress()
getModelStatus()
isModelPropsFetching()"] S3Fetch["Data Fetching:
fetch()
fetchRouterModels()
fetchModelProps()
fetchModalitiesForLoadedModels()"] S3Select["Model Selection:
selectModelById()
selectModelByName()
clearSelection()
findModelByName()
findModelById()
hasModel()"] @@ -59,7 +57,7 @@ flowchart TB end subgraph S4["serverStore"] S4State["State:
props
loading, error
role
fetchPromise"] - S4Getters["Getters:
modelName
supportedModalities
supportsVision
supportsAudio
defaultParams
contextSize
slotsEndpointAvailable
isRouterMode
isModelMode"] + S4Getters["Getters:
defaultParams
contextSize
slotsEndpointAvailable
isRouterMode
isModelMode"] S4Data["Data Handling:
fetch()
getErrorMessage()
clear()"] S4Utils["Utilities:
detectRole()"] end @@ -103,26 +101,24 @@ flowchart TB RE22["selectedModelOption()"] RE23["loadedModelIds()"] RE24["loadingModelIds()"] + RE25["propsCacheVersion()"] + RE26["singleModelName()"] end subgraph ServerExports["serverStore"] - RE25["serverProps()"] - RE26["serverLoading()"] - RE27["serverError()"] - RE28["serverRole()"] - RE29["modelName()"] - RE30["supportedModalities()"] - RE31["supportsVision()"] - RE32["supportsAudio()"] - RE33["slotsEndpointAvailable()"] - RE34["defaultParams()"] - RE35["contextSize()"] - RE36["isRouterMode()"] - RE37["isModelMode()"] + RE27["serverProps()"] + RE28["serverLoading()"] + RE29["serverError()"] + RE30["serverRole()"] + RE31["slotsEndpointAvailable()"] + RE32["defaultParams()"] + RE33["contextSize()"] + RE34["isRouterMode()"] + RE35["isModelMode()"] end subgraph SettingsExports["settingsStore"] - RE38["config()"] - RE39["theme()"] - RE40["isInitialized()"] + RE36["config()"] + RE37["theme()"] + RE38["isInitialized()"] end end end @@ -181,8 +177,10 @@ flowchart TB %% Component hierarchy C_Screen --> C_Form & C_Messages & C_Settings C_Messages --> C_Message - C_Message --> C_SelectorModel - C_Form --> C_SelectorModel + C_Message --> C_ModelsSelector + C_Form --> C_ModelsSelector + C_Form --> C_Attach + C_Message --> C_Attach %% Components use Stores C_Screen --> S1 & S2 @@ -190,7 +188,7 @@ flowchart TB C_Message --> S1 & S2 & S3 C_Form --> S1 & S3 C_Sidebar --> S2 - C_SelectorModel --> S3 & S4 + C_ModelsSelector --> S3 & S4 C_Settings --> S5 %% Stores export Reactive State @@ -233,8 +231,9 @@ flowchart TB class R1,R2,RL routeStyle class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message componentStyle - class C_SelectorModel,C_Settings componentStyle - class LayoutComponents,ChatComponents,ControlComponents componentGroupStyle + class C_ModelsSelector,C_Settings componentStyle + class C_Attach componentStyle + class LayoutComponents,ChatUIComponents componentGroupStyle class S1,S2,S3,S4,S5 storeStyle class S1State,S2State,S3State,S4State,S5State stateStyle class S1Msg,S1Regen,S1Edit,S1Stream,S1LoadState,S1ProcState,S1Error,S1Utils methodStyle @@ -251,4 +250,3 @@ flowchart TB class SV5Extract,SV5Merge,SV5Info,SV5Diff serviceMStyle class ST1,ST2,ST3,ST5,ST6,ST7 storageStyle class API1,API2,API3,API4 apiStyle -``` diff --git a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte index a59ef89636..4d834e72c3 100644 --- a/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte +++ b/tools/server/webui/src/lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActions.svelte @@ -5,7 +5,7 @@ ChatFormActionFileAttachments, ChatFormActionRecord, ChatFormActionSubmit, - SelectorModel + ModelsSelector } from '$lib/components/app'; import { FileTypeCategory } from '$lib/enums'; import { getFileTypeCategory } from '$lib/utils/file-type'; @@ -153,7 +153,7 @@ return ''; }); - let selectorModelRef: SelectorModel | undefined = $state(undefined); + let selectorModelRef: ModelsSelector | undefined = $state(undefined); export function openModelSelector() { selectorModelRef?.open(); @@ -178,7 +178,7 @@ {onFileUpload} /> - import { - BadgeModelName, + ModelBadge, ChatMessageActions, ChatMessageStatistics, ChatMessageThinkingBlock, CopyToClipboardIcon, MarkdownContent, - SelectorModel + ModelsSelector } from '$lib/components/app'; import { useProcessingState } from '$lib/hooks/use-processing-state.svelte'; import { useModelChangeValidation } from '$lib/hooks/use-model-change-validation.svelte'; @@ -248,14 +248,14 @@ {#if displayedModel()} {#if isRouter} - {:else} - + {/if} {#if currentConfig.showMessageStats && message.timings && message.timings.predicted_n && message.timings.predicted_ms} diff --git a/tools/server/webui/src/lib/components/app/index.ts b/tools/server/webui/src/lib/components/app/index.ts index bcc1f41c53..b87f292cbe 100644 --- a/tools/server/webui/src/lib/components/app/index.ts +++ b/tools/server/webui/src/lib/components/app/index.ts @@ -55,14 +55,14 @@ export { default as ActionButton } from './misc/ActionButton.svelte'; export { default as ActionDropdown } from './misc/ActionDropdown.svelte'; export { default as BadgeChatStatistic } from './misc/BadgeChatStatistic.svelte'; export { default as BadgeInfo } from './misc/BadgeInfo.svelte'; -export { default as BadgeModelName } from './misc/BadgeModelName.svelte'; +export { default as ModelBadge } from './models/ModelBadge.svelte'; export { default as BadgeModality } from './misc/BadgeModality.svelte'; export { default as ConversationSelection } from './misc/ConversationSelection.svelte'; export { default as CopyToClipboardIcon } from './misc/CopyToClipboardIcon.svelte'; export { default as KeyboardShortcutInfo } from './misc/KeyboardShortcutInfo.svelte'; export { default as MarkdownContent } from './misc/MarkdownContent.svelte'; export { default as RemoveButton } from './misc/RemoveButton.svelte'; -export { default as SelectorModel } from './misc/SelectorModel.svelte'; +export { default as ModelsSelector } from './models/ModelsSelector.svelte'; // Server diff --git a/tools/server/webui/src/lib/components/app/misc/BadgeModelName.svelte b/tools/server/webui/src/lib/components/app/models/ModelBadge.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/BadgeModelName.svelte rename to tools/server/webui/src/lib/components/app/models/ModelBadge.svelte diff --git a/tools/server/webui/src/lib/components/app/misc/SelectorModel.svelte b/tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte similarity index 100% rename from tools/server/webui/src/lib/components/app/misc/SelectorModel.svelte rename to tools/server/webui/src/lib/components/app/models/ModelsSelector.svelte