Markdown Viewer

```mermaid flowchart TB subgraph Routes["📍 Routes"] R1["/ (+page.svelte)"] R2["/chat/[id]"] RL["+layout.svelte"] end subgraph Components["🧩 Components"] direction TB subgraph LayoutComponents["Layout"] C_Sidebar["ChatSidebar"] C_Screen["ChatScreen"] end subgraph ChatUIComponents["Chat UI"] C_Form["ChatForm"] C_Messages["ChatMessages"] C_Message["ChatMessage"] C_MessageUser["ChatMessageUser"] C_MessageEditForm["ChatMessageEditForm"] C_Attach["ChatAttachments"] C_ModelsSelector["ModelsSelector"] C_Settings["ChatSettings"] end end subgraph Hooks["🪝 Hooks"] H1["useModelChangeValidation"] H2["useProcessingState"] H3["isMobile"] end subgraph Stores["🗄️ Stores"] direction TB subgraph S1["chatStore"] S1State["State: isLoading, currentResponse errorDialogState activeProcessingState chatLoadingStates chatStreamingStates abortControllers processingStates activeConversationId isStreamingActive"] S1LoadState["Loading State: setChatLoading() isChatLoading() syncLoadingStateForChat() clearUIState() isChatLoadingPublic() getAllLoadingChats() getAllStreamingChats()"] S1ProcState["Processing State: setActiveProcessingConversation() getProcessingState() clearProcessingState() getActiveProcessingState() updateProcessingStateFromTimings() getCurrentProcessingStateSync() restoreProcessingStateFromMessages()"] S1Stream["Streaming: streamChatCompletion() startStreaming() stopStreaming() stopGeneration() isStreaming()"] S1Error["Error Handling: showErrorDialog() dismissErrorDialog() isAbortError()"] S1Msg["Message Operations: addMessage() sendMessage() updateMessage() deleteMessage() getDeletionInfo()"] S1Regen["Regeneration: regenerateMessage() regenerateMessageWithBranching() continueAssistantMessage()"] S1Edit["Editing: editAssistantMessage() editUserMessagePreserveResponses() editMessageWithBranching() clearEditMode() isEditModeActive() getAddFilesHandler() setEditModeActive()"] S1Utils["Utilities: getApiOptions() parseTimingData() getOrCreateAbortController() getConversationModel()"] end subgraph S2["conversationsStore"] S2State["State: conversations activeConversation activeMessages usedModalities isInitialized titleUpdateConfirmationCallback"] S2Modal["Modalities: getModalitiesUpToMessage() calculateModalitiesFromMessages()"] S2Lifecycle["Lifecycle: initialize() loadConversations() clearActiveConversation()"] S2ConvCRUD["Conversation CRUD: createConversation() loadConversation() deleteConversation() updateConversationName() updateConversationTitleWithConfirmation()"] S2MsgMgmt["Message Management: refreshActiveMessages() addMessageToActive() updateMessageAtIndex() findMessageIndex() sliceActiveMessages() removeMessageAtIndex() getConversationMessages()"] S2Nav["Navigation: navigateToSibling() updateCurrentNode() updateConversationTimestamp()"] S2Export["Import/Export: downloadConversation() exportAllConversations() importConversations() triggerDownload()"] S2Utils["Utilities: setTitleUpdateConfirmationCallback()"] end subgraph S3["modelsStore"] S3State["State: models, routerModels selectedModelId selectedModelName loading, updating, error 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()"] S3LoadUnload["Loading/Unloading Models: loadModel() unloadModel() ensureModelLoaded() waitForModelStatus() pollForModelStatus()"] S3Utils["Utilities: toDisplayName() clear()"] end subgraph S4["serverStore"] S4State["State: props loading, error role fetchPromise"] S4Getters["Getters: defaultParams contextSize isRouterMode isModelMode"] S4Data["Data Handling: fetch() getErrorMessage() clear()"] S4Utils["Utilities: detectRole()"] end subgraph S5["settingsStore"] S5State["State: config theme isInitialized userOverrides"] S5Lifecycle["Lifecycle: initialize() loadConfig() saveConfig() loadTheme() saveTheme()"] S5Update["Config Updates: updateConfig() updateMultipleConfig() updateTheme()"] S5Reset["Reset: resetConfig() resetTheme() resetAll() resetParameterToServerDefault()"] S5Sync["Server Sync: syncWithServerDefaults() forceSyncWithServerDefaults()"] S5Utils["Utilities: getConfig() getAllConfig() getParameterInfo() getParameterDiff() getServerDefaults() clearAllUserOverrides()"] end subgraph ReactiveExports["⚡ Reactive Exports"] direction LR subgraph ChatExports["chatStore"] RE1["isLoading()"] RE2["currentResponse()"] RE3["errorDialog()"] RE4["activeProcessingState()"] RE5["isChatStreaming()"] RE6["isChatLoading()"] RE7["getChatStreaming()"] RE8["getAllLoadingChats()"] RE9["getAllStreamingChats()"] RE9a["isEditModeActive()"] RE9b["getAddFilesHandler()"] RE9c["setEditModeActive()"] RE9d["clearEditMode()"] end subgraph ConvExports["conversationsStore"] RE10["conversations()"] RE11["activeConversation()"] RE12["activeMessages()"] RE13["isConversationsInitialized()"] RE14["usedModalities()"] end subgraph ModelsExports["modelsStore"] RE15["modelOptions()"] RE16["routerModels()"] RE17["modelsLoading()"] RE18["modelsUpdating()"] RE19["modelsError()"] RE20["selectedModelId()"] RE21["selectedModelName()"] RE22["selectedModelOption()"] RE23["loadedModelIds()"] RE24["loadingModelIds()"] RE25["propsCacheVersion()"] RE26["singleModelName()"] end subgraph ServerExports["serverStore"] RE27["serverProps()"] RE28["serverLoading()"] RE29["serverError()"] RE30["serverRole()"] RE31["defaultParams()"] RE32["contextSize()"] RE33["isRouterMode()"] RE34["isModelMode()"] end subgraph SettingsExports["settingsStore"] RE35["config()"] RE36["theme()"] RE37["isInitialized()"] end end end subgraph Services["⚙️ Services"] direction TB subgraph SV1["ChatService"] SV1Msg["Messaging: sendMessage()"] SV1Stream["Streaming: handleStreamResponse() parseSSEChunk()"] SV1Convert["Conversion: convertMessageToChatData() convertExtraToApiFormat()"] SV1Utils["Utilities: extractReasoningContent() getServerProps() getModels()"] end subgraph SV2["ModelsService"] SV2List["Listing: list() listRouter()"] SV2LoadUnload["Load/Unload: load() unload()"] SV2Status["Status: isModelLoaded() isModelLoading()"] end subgraph SV3["PropsService"] SV3Fetch["Fetching: fetch() fetchForModel()"] end subgraph SV4["DatabaseService"] SV4Conv["Conversations: createConversation() getConversation() getAllConversations() updateConversation() deleteConversation()"] SV4Msg["Messages: createMessageBranch() createRootMessage() getConversationMessages() updateMessage() deleteMessage() deleteMessageCascading()"] SV4Node["Navigation: updateCurrentNode()"] SV4Import["Import: importConversations()"] end subgraph SV5["ParameterSyncService"] SV5Extract["Extraction: extractServerDefaults()"] SV5Merge["Merging: mergeWithServerDefaults()"] SV5Info["Info: getParameterInfo() canSyncParameter() getSyncableParameterKeys() validateServerParameter()"] SV5Diff["Diff: createParameterDiff()"] end end subgraph Storage["💾 Storage"] ST1["IndexedDB"] ST2["conversations"] ST3["messages"] ST5["LocalStorage"] ST6["config"] ST7["userOverrides"] end subgraph APIs["🌐 llama-server API"] API1["/v1/chat/completions"] API2["/props /props?model="] API3["/models /models/load /models/unload"] API4["/v1/models"] end %% Routes render Components R1 --> C_Screen R2 --> C_Screen RL --> C_Sidebar %% Component hierarchy C_Screen --> C_Form & C_Messages & C_Settings C_Messages --> C_Message C_Message --> C_MessageUser C_MessageUser --> C_MessageEditForm C_MessageEditForm --> C_ModelsSelector C_MessageEditForm --> C_Attach C_Form --> C_ModelsSelector C_Form --> C_Attach C_Message --> C_Attach %% Components use Hooks C_Form --> H1 C_Message --> H1 & H2 C_MessageEditForm --> H1 C_Screen --> H2 %% Hooks use Stores H1 --> S3 & S4 H2 --> S1 & S5 %% Components use Stores C_Screen --> S1 & S2 C_Messages --> S2 C_Message --> S1 & S2 & S3 C_Form --> S1 & S3 C_Sidebar --> S2 C_ModelsSelector --> S3 & S4 C_Settings --> S5 %% Stores export Reactive State S1 -. exports .-> ChatExports S2 -. exports .-> ConvExports S3 -. exports .-> ModelsExports S4 -. exports .-> ServerExports S5 -. exports .-> SettingsExports %% Stores use Services S1 --> SV1 & SV4 S2 --> SV4 S3 --> SV2 & SV3 S4 --> SV3 S5 --> SV5 %% Services to Storage SV4 --> ST1 ST1 --> ST2 & ST3 SV5 --> ST5 ST5 --> ST6 & ST7 %% Services to APIs SV1 --> API1 SV2 --> API3 & API4 SV3 --> API2 %% Styling classDef routeStyle fill:#e1f5fe,stroke:#01579b,stroke-width:2px classDef componentStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px classDef componentGroupStyle fill:#e1bee7,stroke:#7b1fa2,stroke-width:1px classDef storeStyle fill:#fff3e0,stroke:#e65100,stroke-width:2px classDef stateStyle fill:#ffe0b2,stroke:#e65100,stroke-width:1px classDef methodStyle fill:#ffecb3,stroke:#e65100,stroke-width:1px classDef reactiveStyle fill:#fffde7,stroke:#f9a825,stroke-width:1px classDef serviceStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px classDef serviceMStyle fill:#c8e6c9,stroke:#2e7d32,stroke-width:1px classDef storageStyle fill:#fce4ec,stroke:#c2185b,stroke-width:2px classDef apiStyle fill:#e3f2fd,stroke:#1565c0,stroke-width:2px class R1,R2,RL routeStyle class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message,C_MessageUser,C_MessageEditForm componentStyle class C_ModelsSelector,C_Settings componentStyle class C_Attach componentStyle class H1,H2,H3 methodStyle class LayoutComponents,ChatUIComponents componentGroupStyle class Hooks storeStyle class S1,S2,S3,S4,S5 storeStyle class S1State,S2State,S3State,S4State,S5State stateStyle class S1Msg,S1Regen,S1Edit,S1Stream,S1LoadState,S1ProcState,S1Error,S1Utils methodStyle class S2Lifecycle,S2ConvCRUD,S2MsgMgmt,S2Nav,S2Modal,S2Export,S2Utils methodStyle class S3Getters,S3Modal,S3Status,S3Fetch,S3Select,S3LoadUnload,S3Utils methodStyle class S4Getters,S4Data,S4Utils methodStyle class S5Lifecycle,S5Update,S5Reset,S5Sync,S5Utils methodStyle class ChatExports,ConvExports,ModelsExports,ServerExports,SettingsExports reactiveStyle class SV1,SV2,SV3,SV4,SV5 serviceStyle class SV1Msg,SV1Stream,SV1Convert,SV1Utils serviceMStyle class SV2List,SV2LoadUnload,SV2Status serviceMStyle class SV3Fetch serviceMStyle class SV4Conv,SV4Msg,SV4Node,SV4Import serviceMStyle class SV5Extract,SV5Merge,SV5Info,SV5Diff serviceMStyle class ST1,ST2,ST3,ST5,ST6,ST7 storageStyle class API1,API2,API3,API4 apiStyle ```