File size: 14,417 Bytes
41a5ab2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
```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["<b>State:</b><br/>isLoading, currentResponse<br/>errorDialogState<br/>activeProcessingState<br/>chatLoadingStates<br/>chatStreamingStates<br/>abortControllers<br/>processingStates<br/>activeConversationId<br/>isStreamingActive"]

            S1LoadState["<b>Loading State:</b><br/>setChatLoading()<br/>isChatLoading()<br/>syncLoadingStateForChat()<br/>clearUIState()<br/>isChatLoadingPublic()<br/>getAllLoadingChats()<br/>getAllStreamingChats()"]

            S1ProcState["<b>Processing State:</b><br/>setActiveProcessingConversation()<br/>getProcessingState()<br/>clearProcessingState()<br/>getActiveProcessingState()<br/>updateProcessingStateFromTimings()<br/>getCurrentProcessingStateSync()<br/>restoreProcessingStateFromMessages()"]

            S1Stream["<b>Streaming:</b><br/>streamChatCompletion()<br/>startStreaming()<br/>stopStreaming()<br/>stopGeneration()<br/>isStreaming()"]

            S1Error["<b>Error Handling:</b><br/>showErrorDialog()<br/>dismissErrorDialog()<br/>isAbortError()"]

            S1Msg["<b>Message Operations:</b><br/>addMessage()<br/>sendMessage()<br/>updateMessage()<br/>deleteMessage()<br/>getDeletionInfo()"]

            S1Regen["<b>Regeneration:</b><br/>regenerateMessage()<br/>regenerateMessageWithBranching()<br/>continueAssistantMessage()"]

            S1Edit["<b>Editing:</b><br/>editAssistantMessage()<br/>editUserMessagePreserveResponses()<br/>editMessageWithBranching()<br/>clearEditMode()<br/>isEditModeActive()<br/>getAddFilesHandler()<br/>setEditModeActive()"]

            S1Utils["<b>Utilities:</b><br/>getApiOptions()<br/>parseTimingData()<br/>getOrCreateAbortController()<br/>getConversationModel()"]

        end

        subgraph S2["conversationsStore"]

            S2State["<b>State:</b><br/>conversations<br/>activeConversation<br/>activeMessages<br/>usedModalities<br/>isInitialized<br/>titleUpdateConfirmationCallback"]

            S2Modal["<b>Modalities:</b><br/>getModalitiesUpToMessage()<br/>calculateModalitiesFromMessages()"]

            S2Lifecycle["<b>Lifecycle:</b><br/>initialize()<br/>loadConversations()<br/>clearActiveConversation()"]

            S2ConvCRUD["<b>Conversation CRUD:</b><br/>createConversation()<br/>loadConversation()<br/>deleteConversation()<br/>updateConversationName()<br/>updateConversationTitleWithConfirmation()"]

            S2MsgMgmt["<b>Message Management:</b><br/>refreshActiveMessages()<br/>addMessageToActive()<br/>updateMessageAtIndex()<br/>findMessageIndex()<br/>sliceActiveMessages()<br/>removeMessageAtIndex()<br/>getConversationMessages()"]

            S2Nav["<b>Navigation:</b><br/>navigateToSibling()<br/>updateCurrentNode()<br/>updateConversationTimestamp()"]

            S2Export["<b>Import/Export:</b><br/>downloadConversation()<br/>exportAllConversations()<br/>importConversations()<br/>triggerDownload()"]

            S2Utils["<b>Utilities:</b><br/>setTitleUpdateConfirmationCallback()"]

        end

        subgraph S3["modelsStore"]

            S3State["<b>State:</b><br/>models, routerModels<br/>selectedModelId<br/>selectedModelName<br/>loading, updating, error<br/>modelLoadingStates<br/>modelPropsCache<br/>modelPropsFetching<br/>propsCacheVersion"]

            S3Getters["<b>Computed Getters:</b><br/>selectedModel<br/>loadedModelIds<br/>loadingModelIds<br/>singleModelName"]

            S3Modal["<b>Modalities:</b><br/>getModelModalities()<br/>modelSupportsVision()<br/>modelSupportsAudio()<br/>getModelModalitiesArray()<br/>getModelProps()<br/>updateModelModalities()"]

            S3Status["<b>Status Queries:</b><br/>isModelLoaded()<br/>isModelOperationInProgress()<br/>getModelStatus()<br/>isModelPropsFetching()"]

            S3Fetch["<b>Data Fetching:</b><br/>fetch()<br/>fetchRouterModels()<br/>fetchModelProps()<br/>fetchModalitiesForLoadedModels()"]

            S3Select["<b>Model Selection:</b><br/>selectModelById()<br/>selectModelByName()<br/>clearSelection()<br/>findModelByName()<br/>findModelById()<br/>hasModel()"]

            S3LoadUnload["<b>Loading/Unloading Models:</b><br/>loadModel()<br/>unloadModel()<br/>ensureModelLoaded()<br/>waitForModelStatus()<br/>pollForModelStatus()"]

            S3Utils["<b>Utilities:</b><br/>toDisplayName()<br/>clear()"]

        end

        subgraph S4["serverStore"]

            S4State["<b>State:</b><br/>props<br/>loading, error<br/>role<br/>fetchPromise"]

            S4Getters["<b>Getters:</b><br/>defaultParams<br/>contextSize<br/>isRouterMode<br/>isModelMode"]

            S4Data["<b>Data Handling:</b><br/>fetch()<br/>getErrorMessage()<br/>clear()"]

            S4Utils["<b>Utilities:</b><br/>detectRole()"]

        end

        subgraph S5["settingsStore"]

            S5State["<b>State:</b><br/>config<br/>theme<br/>isInitialized<br/>userOverrides"]

            S5Lifecycle["<b>Lifecycle:</b><br/>initialize()<br/>loadConfig()<br/>saveConfig()<br/>loadTheme()<br/>saveTheme()"]

            S5Update["<b>Config Updates:</b><br/>updateConfig()<br/>updateMultipleConfig()<br/>updateTheme()"]

            S5Reset["<b>Reset:</b><br/>resetConfig()<br/>resetTheme()<br/>resetAll()<br/>resetParameterToServerDefault()"]

            S5Sync["<b>Server Sync:</b><br/>syncWithServerDefaults()<br/>forceSyncWithServerDefaults()"]

            S5Utils["<b>Utilities:</b><br/>getConfig()<br/>getAllConfig()<br/>getParameterInfo()<br/>getParameterDiff()<br/>getServerDefaults()<br/>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["<b>Messaging:</b><br/>sendMessage()"]

            SV1Stream["<b>Streaming:</b><br/>handleStreamResponse()<br/>parseSSEChunk()"]

            SV1Convert["<b>Conversion:</b><br/>convertMessageToChatData()<br/>convertExtraToApiFormat()"]

            SV1Utils["<b>Utilities:</b><br/>extractReasoningContent()<br/>getServerProps()<br/>getModels()"]

        end

        subgraph SV2["ModelsService"]

            SV2List["<b>Listing:</b><br/>list()<br/>listRouter()"]

            SV2LoadUnload["<b>Load/Unload:</b><br/>load()<br/>unload()"]

            SV2Status["<b>Status:</b><br/>isModelLoaded()<br/>isModelLoading()"]

        end

        subgraph SV3["PropsService"]

            SV3Fetch["<b>Fetching:</b><br/>fetch()<br/>fetchForModel()"]

        end

        subgraph SV4["DatabaseService"]

            SV4Conv["<b>Conversations:</b><br/>createConversation()<br/>getConversation()<br/>getAllConversations()<br/>updateConversation()<br/>deleteConversation()"]

            SV4Msg["<b>Messages:</b><br/>createMessageBranch()<br/>createRootMessage()<br/>getConversationMessages()<br/>updateMessage()<br/>deleteMessage()<br/>deleteMessageCascading()"]

            SV4Node["<b>Navigation:</b><br/>updateCurrentNode()"]

            SV4Import["<b>Import:</b><br/>importConversations()"]

        end

        subgraph SV5["ParameterSyncService"]

            SV5Extract["<b>Extraction:</b><br/>extractServerDefaults()"]

            SV5Merge["<b>Merging:</b><br/>mergeWithServerDefaults()"]

            SV5Info["<b>Info:</b><br/>getParameterInfo()<br/>canSyncParameter()<br/>getSyncableParameterKeys()<br/>validateServerParameter()"]

            SV5Diff["<b>Diff:</b><br/>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<br/>/props?model="]

        API3["/models<br/>/models/load<br/>/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

```