1```mermaid
2flowchart TB
3subgraph Routes["๐ Routes"]
4R1["/ (+page.svelte)"]
5R2["/chat/[id]"]
6RL["+layout.svelte"]
7end
8
9 subgraph Components["๐งฉ Components"]
10 direction TB
11 subgraph LayoutComponents["Layout"]
12 C_Sidebar["ChatSidebar"]
13 C_Screen["ChatScreen"]
14 end
15 subgraph ChatUIComponents["Chat UI"]
16 C_Form["ChatForm"]
17 C_Messages["ChatMessages"]
18 C_Message["ChatMessage"]
19 C_MessageUser["ChatMessageUser"]
20 C_MessageEditForm["ChatMessageEditForm"]
21 C_Attach["ChatAttachments"]
22 C_ModelsSelector["ModelsSelector"]
23 C_Settings["ChatSettings"]
24 end
25 end
26
27 subgraph Hooks["๐ช Hooks"]
28 H1["useModelChangeValidation"]
29 H2["useProcessingState"]
30 H3["isMobile"]
31 end
32
33 subgraph Stores["๐๏ธ Stores"]
34 direction TB
35 subgraph S1["chatStore"]
36 S1State["<b>State:</b><br/>isLoading, currentResponse<br/>errorDialogState<br/>activeProcessingState<br/>chatLoadingStates<br/>chatStreamingStates<br/>abortControllers<br/>processingStates<br/>activeConversationId<br/>isStreamingActive"]
37 S1LoadState["<b>Loading State:</b><br/>setChatLoading()<br/>isChatLoading()<br/>syncLoadingStateForChat()<br/>clearUIState()<br/>isChatLoadingPublic()<br/>getAllLoadingChats()<br/>getAllStreamingChats()"]
38 S1ProcState["<b>Processing State:</b><br/>setActiveProcessingConversation()<br/>getProcessingState()<br/>clearProcessingState()<br/>getActiveProcessingState()<br/>updateProcessingStateFromTimings()<br/>getCurrentProcessingStateSync()<br/>restoreProcessingStateFromMessages()"]
39 S1Stream["<b>Streaming:</b><br/>streamChatCompletion()<br/>startStreaming()<br/>stopStreaming()<br/>stopGeneration()<br/>isStreaming()"]
40 S1Error["<b>Error Handling:</b><br/>showErrorDialog()<br/>dismissErrorDialog()<br/>isAbortError()"]
41 S1Msg["<b>Message Operations:</b><br/>addMessage()<br/>sendMessage()<br/>updateMessage()<br/>deleteMessage()<br/>getDeletionInfo()"]
42 S1Regen["<b>Regeneration:</b><br/>regenerateMessage()<br/>regenerateMessageWithBranching()<br/>continueAssistantMessage()"]
43 S1Edit["<b>Editing:</b><br/>editAssistantMessage()<br/>editUserMessagePreserveResponses()<br/>editMessageWithBranching()<br/>clearEditMode()<br/>isEditModeActive()<br/>getAddFilesHandler()<br/>setEditModeActive()"]
44 S1Utils["<b>Utilities:</b><br/>getApiOptions()<br/>parseTimingData()<br/>getOrCreateAbortController()<br/>getConversationModel()"]
45 end
46 subgraph S2["conversationsStore"]
47 S2State["<b>State:</b><br/>conversations<br/>activeConversation<br/>activeMessages<br/>usedModalities<br/>isInitialized<br/>titleUpdateConfirmationCallback"]
48 S2Modal["<b>Modalities:</b><br/>getModalitiesUpToMessage()<br/>calculateModalitiesFromMessages()"]
49 S2Lifecycle["<b>Lifecycle:</b><br/>initialize()<br/>loadConversations()<br/>clearActiveConversation()"]
50 S2ConvCRUD["<b>Conversation CRUD:</b><br/>createConversation()<br/>loadConversation()<br/>deleteConversation()<br/>updateConversationName()<br/>updateConversationTitleWithConfirmation()"]
51 S2MsgMgmt["<b>Message Management:</b><br/>refreshActiveMessages()<br/>addMessageToActive()<br/>updateMessageAtIndex()<br/>findMessageIndex()<br/>sliceActiveMessages()<br/>removeMessageAtIndex()<br/>getConversationMessages()"]
52 S2Nav["<b>Navigation:</b><br/>navigateToSibling()<br/>updateCurrentNode()<br/>updateConversationTimestamp()"]
53 S2Export["<b>Import/Export:</b><br/>downloadConversation()<br/>exportAllConversations()<br/>importConversations()<br/>triggerDownload()"]
54 S2Utils["<b>Utilities:</b><br/>setTitleUpdateConfirmationCallback()"]
55 end
56 subgraph S3["modelsStore"]
57 S3State["<b>State:</b><br/>models, routerModels<br/>selectedModelId<br/>selectedModelName<br/>loading, updating, error<br/>modelLoadingStates<br/>modelPropsCache<br/>modelPropsFetching<br/>propsCacheVersion"]
58 S3Getters["<b>Computed Getters:</b><br/>selectedModel<br/>loadedModelIds<br/>loadingModelIds<br/>singleModelName"]
59 S3Modal["<b>Modalities:</b><br/>getModelModalities()<br/>modelSupportsVision()<br/>modelSupportsAudio()<br/>getModelModalitiesArray()<br/>getModelProps()<br/>updateModelModalities()"]
60 S3Status["<b>Status Queries:</b><br/>isModelLoaded()<br/>isModelOperationInProgress()<br/>getModelStatus()<br/>isModelPropsFetching()"]
61 S3Fetch["<b>Data Fetching:</b><br/>fetch()<br/>fetchRouterModels()<br/>fetchModelProps()<br/>fetchModalitiesForLoadedModels()"]
62 S3Select["<b>Model Selection:</b><br/>selectModelById()<br/>selectModelByName()<br/>clearSelection()<br/>findModelByName()<br/>findModelById()<br/>hasModel()"]
63 S3LoadUnload["<b>Loading/Unloading Models:</b><br/>loadModel()<br/>unloadModel()<br/>ensureModelLoaded()<br/>waitForModelStatus()<br/>pollForModelStatus()"]
64 S3Utils["<b>Utilities:</b><br/>toDisplayName()<br/>clear()"]
65 end
66 subgraph S4["serverStore"]
67 S4State["<b>State:</b><br/>props<br/>loading, error<br/>role<br/>fetchPromise"]
68 S4Getters["<b>Getters:</b><br/>defaultParams<br/>contextSize<br/>isRouterMode<br/>isModelMode"]
69 S4Data["<b>Data Handling:</b><br/>fetch()<br/>getErrorMessage()<br/>clear()"]
70 S4Utils["<b>Utilities:</b><br/>detectRole()"]
71 end
72 subgraph S5["settingsStore"]
73 S5State["<b>State:</b><br/>config<br/>theme<br/>isInitialized<br/>userOverrides"]
74 S5Lifecycle["<b>Lifecycle:</b><br/>initialize()<br/>loadConfig()<br/>saveConfig()<br/>loadTheme()<br/>saveTheme()"]
75 S5Update["<b>Config Updates:</b><br/>updateConfig()<br/>updateMultipleConfig()<br/>updateTheme()"]
76 S5Reset["<b>Reset:</b><br/>resetConfig()<br/>resetTheme()<br/>resetAll()<br/>resetParameterToServerDefault()"]
77 S5Sync["<b>Server Sync:</b><br/>syncWithServerDefaults()<br/>forceSyncWithServerDefaults()"]
78 S5Utils["<b>Utilities:</b><br/>getConfig()<br/>getAllConfig()<br/>getParameterInfo()<br/>getParameterDiff()<br/>getServerDefaults()<br/>clearAllUserOverrides()"]
79 end
80
81 subgraph ReactiveExports["โก Reactive Exports"]
82 direction LR
83 subgraph ChatExports["chatStore"]
84 RE1["isLoading()"]
85 RE2["currentResponse()"]
86 RE3["errorDialog()"]
87 RE4["activeProcessingState()"]
88 RE5["isChatStreaming()"]
89 RE6["isChatLoading()"]
90 RE7["getChatStreaming()"]
91 RE8["getAllLoadingChats()"]
92 RE9["getAllStreamingChats()"]
93 RE9a["isEditModeActive()"]
94 RE9b["getAddFilesHandler()"]
95 RE9c["setEditModeActive()"]
96 RE9d["clearEditMode()"]
97 end
98 subgraph ConvExports["conversationsStore"]
99 RE10["conversations()"]
100 RE11["activeConversation()"]
101 RE12["activeMessages()"]
102 RE13["isConversationsInitialized()"]
103 RE14["usedModalities()"]
104 end
105 subgraph ModelsExports["modelsStore"]
106 RE15["modelOptions()"]
107 RE16["routerModels()"]
108 RE17["modelsLoading()"]
109 RE18["modelsUpdating()"]
110 RE19["modelsError()"]
111 RE20["selectedModelId()"]
112 RE21["selectedModelName()"]
113 RE22["selectedModelOption()"]
114 RE23["loadedModelIds()"]
115 RE24["loadingModelIds()"]
116 RE25["propsCacheVersion()"]
117 RE26["singleModelName()"]
118 end
119 subgraph ServerExports["serverStore"]
120 RE27["serverProps()"]
121 RE28["serverLoading()"]
122 RE29["serverError()"]
123 RE30["serverRole()"]
124 RE31["defaultParams()"]
125 RE32["contextSize()"]
126 RE33["isRouterMode()"]
127 RE34["isModelMode()"]
128 end
129 subgraph SettingsExports["settingsStore"]
130 RE35["config()"]
131 RE36["theme()"]
132 RE37["isInitialized()"]
133 end
134 end
135 end
136
137 subgraph Services["โ๏ธ Services"]
138 direction TB
139 subgraph SV1["ChatService"]
140 SV1Msg["<b>Messaging:</b><br/>sendMessage()"]
141 SV1Stream["<b>Streaming:</b><br/>handleStreamResponse()<br/>parseSSEChunk()"]
142 SV1Convert["<b>Conversion:</b><br/>convertMessageToChatData()<br/>convertExtraToApiFormat()"]
143 SV1Utils["<b>Utilities:</b><br/>extractReasoningContent()<br/>getServerProps()<br/>getModels()"]
144 end
145 subgraph SV2["ModelsService"]
146 SV2List["<b>Listing:</b><br/>list()<br/>listRouter()"]
147 SV2LoadUnload["<b>Load/Unload:</b><br/>load()<br/>unload()"]
148 SV2Status["<b>Status:</b><br/>isModelLoaded()<br/>isModelLoading()"]
149 end
150 subgraph SV3["PropsService"]
151 SV3Fetch["<b>Fetching:</b><br/>fetch()<br/>fetchForModel()"]
152 end
153 subgraph SV4["DatabaseService"]
154 SV4Conv["<b>Conversations:</b><br/>createConversation()<br/>getConversation()<br/>getAllConversations()<br/>updateConversation()<br/>deleteConversation()"]
155 SV4Msg["<b>Messages:</b><br/>createMessageBranch()<br/>createRootMessage()<br/>getConversationMessages()<br/>updateMessage()<br/>deleteMessage()<br/>deleteMessageCascading()"]
156 SV4Node["<b>Navigation:</b><br/>updateCurrentNode()"]
157 SV4Import["<b>Import:</b><br/>importConversations()"]
158 end
159 subgraph SV5["ParameterSyncService"]
160 SV5Extract["<b>Extraction:</b><br/>extractServerDefaults()"]
161 SV5Merge["<b>Merging:</b><br/>mergeWithServerDefaults()"]
162 SV5Info["<b>Info:</b><br/>getParameterInfo()<br/>canSyncParameter()<br/>getSyncableParameterKeys()<br/>validateServerParameter()"]
163 SV5Diff["<b>Diff:</b><br/>createParameterDiff()"]
164 end
165 end
166
167 subgraph Storage["๐พ Storage"]
168 ST1["IndexedDB"]
169 ST2["conversations"]
170 ST3["messages"]
171 ST5["LocalStorage"]
172 ST6["config"]
173 ST7["userOverrides"]
174 end
175
176 subgraph APIs["๐ llama-server API"]
177 API1["/v1/chat/completions"]
178 API2["/props<br/>/props?model="]
179 API3["/models<br/>/models/load<br/>/models/unload"]
180 API4["/v1/models"]
181 end
182
183 %% Routes render Components
184 R1 --> C_Screen
185 R2 --> C_Screen
186 RL --> C_Sidebar
187
188 %% Component hierarchy
189 C_Screen --> C_Form & C_Messages & C_Settings
190 C_Messages --> C_Message
191 C_Message --> C_MessageUser
192 C_MessageUser --> C_MessageEditForm
193 C_MessageEditForm --> C_ModelsSelector
194 C_MessageEditForm --> C_Attach
195 C_Form --> C_ModelsSelector
196 C_Form --> C_Attach
197 C_Message --> C_Attach
198
199 %% Components use Hooks
200 C_Form --> H1
201 C_Message --> H1 & H2
202 C_MessageEditForm --> H1
203 C_Screen --> H2
204
205 %% Hooks use Stores
206 H1 --> S3 & S4
207 H2 --> S1 & S5
208
209 %% Components use Stores
210 C_Screen --> S1 & S2
211 C_Messages --> S2
212 C_Message --> S1 & S2 & S3
213 C_Form --> S1 & S3
214 C_Sidebar --> S2
215 C_ModelsSelector --> S3 & S4
216 C_Settings --> S5
217
218 %% Stores export Reactive State
219 S1 -. exports .-> ChatExports
220 S2 -. exports .-> ConvExports
221 S3 -. exports .-> ModelsExports
222 S4 -. exports .-> ServerExports
223 S5 -. exports .-> SettingsExports
224
225 %% Stores use Services
226 S1 --> SV1 & SV4
227 S2 --> SV4
228 S3 --> SV2 & SV3
229 S4 --> SV3
230 S5 --> SV5
231
232 %% Services to Storage
233 SV4 --> ST1
234 ST1 --> ST2 & ST3
235 SV5 --> ST5
236 ST5 --> ST6 & ST7
237
238 %% Services to APIs
239 SV1 --> API1
240 SV2 --> API3 & API4
241 SV3 --> API2
242
243 %% Styling
244 classDef routeStyle fill:#e1f5fe,stroke:#01579b,stroke-width:2px
245 classDef componentStyle fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
246 classDef componentGroupStyle fill:#e1bee7,stroke:#7b1fa2,stroke-width:1px
247 classDef storeStyle fill:#fff3e0,stroke:#e65100,stroke-width:2px
248 classDef stateStyle fill:#ffe0b2,stroke:#e65100,stroke-width:1px
249 classDef methodStyle fill:#ffecb3,stroke:#e65100,stroke-width:1px
250 classDef reactiveStyle fill:#fffde7,stroke:#f9a825,stroke-width:1px
251 classDef serviceStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
252 classDef serviceMStyle fill:#c8e6c9,stroke:#2e7d32,stroke-width:1px
253 classDef storageStyle fill:#fce4ec,stroke:#c2185b,stroke-width:2px
254 classDef apiStyle fill:#e3f2fd,stroke:#1565c0,stroke-width:2px
255
256 class R1,R2,RL routeStyle
257 class C_Sidebar,C_Screen,C_Form,C_Messages,C_Message,C_MessageUser,C_MessageEditForm componentStyle
258 class C_ModelsSelector,C_Settings componentStyle
259 class C_Attach componentStyle
260 class H1,H2,H3 methodStyle
261 class LayoutComponents,ChatUIComponents componentGroupStyle
262 class Hooks storeStyle
263 class S1,S2,S3,S4,S5 storeStyle
264 class S1State,S2State,S3State,S4State,S5State stateStyle
265 class S1Msg,S1Regen,S1Edit,S1Stream,S1LoadState,S1ProcState,S1Error,S1Utils methodStyle
266 class S2Lifecycle,S2ConvCRUD,S2MsgMgmt,S2Nav,S2Modal,S2Export,S2Utils methodStyle
267 class S3Getters,S3Modal,S3Status,S3Fetch,S3Select,S3LoadUnload,S3Utils methodStyle
268 class S4Getters,S4Data,S4Utils methodStyle
269 class S5Lifecycle,S5Update,S5Reset,S5Sync,S5Utils methodStyle
270 class ChatExports,ConvExports,ModelsExports,ServerExports,SettingsExports reactiveStyle
271 class SV1,SV2,SV3,SV4,SV5 serviceStyle
272 class SV1Msg,SV1Stream,SV1Convert,SV1Utils serviceMStyle
273 class SV2List,SV2LoadUnload,SV2Status serviceMStyle
274 class SV3Fetch serviceMStyle
275 class SV4Conv,SV4Msg,SV4Node,SV4Import serviceMStyle
276 class SV5Extract,SV5Merge,SV5Info,SV5Diff serviceMStyle
277 class ST1,ST2,ST3,ST5,ST6,ST7 storageStyle
278 class API1,API2,API3,API4 apiStyle
279```