103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
```mermaid
|
|
flowchart TB
|
|
subgraph Routes["📍 Routes"]
|
|
R1["/ (Welcome)"]
|
|
R2["/chat/[id]"]
|
|
RL["+layout.svelte"]
|
|
end
|
|
|
|
subgraph Components["🧩 Components"]
|
|
C_Sidebar["ChatSidebar"]
|
|
C_Screen["ChatScreen"]
|
|
C_Form["ChatForm"]
|
|
C_Messages["ChatMessages"]
|
|
C_ModelsSelector["ModelsSelector"]
|
|
C_Settings["ChatSettings"]
|
|
end
|
|
|
|
subgraph Hooks["🪝 Hooks"]
|
|
H1["useModelChangeValidation"]
|
|
H2["useProcessingState"]
|
|
end
|
|
|
|
subgraph Stores["🗄️ Stores"]
|
|
S1["chatStore<br/><i>Chat interactions & streaming</i>"]
|
|
S2["conversationsStore<br/><i>Conversation data & messages</i>"]
|
|
S3["modelsStore<br/><i>Model selection & loading</i>"]
|
|
S4["serverStore<br/><i>Server props & role detection</i>"]
|
|
S5["settingsStore<br/><i>User configuration</i>"]
|
|
end
|
|
|
|
subgraph Services["⚙️ Services"]
|
|
SV1["ChatService"]
|
|
SV2["ModelsService"]
|
|
SV3["PropsService"]
|
|
SV4["DatabaseService"]
|
|
SV5["ParameterSyncService"]
|
|
end
|
|
|
|
subgraph Storage["💾 Storage"]
|
|
ST1["IndexedDB<br/><i>conversations, messages</i>"]
|
|
ST2["LocalStorage<br/><i>config, userOverrides</i>"]
|
|
end
|
|
|
|
subgraph APIs["🌐 llama-server API"]
|
|
API1["/v1/chat/completions"]
|
|
API2["/props"]
|
|
API3["/models/*"]
|
|
API4["/v1/models"]
|
|
end
|
|
|
|
%% Routes → Components
|
|
R1 & R2 --> C_Screen
|
|
RL --> C_Sidebar
|
|
|
|
%% Component hierarchy
|
|
C_Screen --> C_Form & C_Messages & C_Settings
|
|
C_Form & C_Messages --> C_ModelsSelector
|
|
|
|
%% Components → Hooks → Stores
|
|
C_Form & C_Messages --> H1 & H2
|
|
H1 --> S3 & S4
|
|
H2 --> S1 & S5
|
|
|
|
%% Components → Stores
|
|
C_Screen --> S1 & S2
|
|
C_Sidebar --> S2
|
|
C_ModelsSelector --> S3 & S4
|
|
C_Settings --> S5
|
|
|
|
%% Stores → Services
|
|
S1 --> SV1 & SV4
|
|
S2 --> SV4
|
|
S3 --> SV2 & SV3
|
|
S4 --> SV3
|
|
S5 --> SV5
|
|
|
|
%% Services → Storage
|
|
SV4 --> ST1
|
|
SV5 --> ST2
|
|
|
|
%% Services → 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 hookStyle fill:#fff8e1,stroke:#ff8f00,stroke-width:2px
|
|
classDef storeStyle fill:#fff3e0,stroke:#e65100,stroke-width:2px
|
|
classDef serviceStyle fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
|
|
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_ModelsSelector,C_Settings componentStyle
|
|
class H1,H2 hookStyle
|
|
class S1,S2,S3,S4,S5 storeStyle
|
|
class SV1,SV2,SV3,SV4,SV5 serviceStyle
|
|
class ST1,ST2 storageStyle
|
|
class API1,API2,API3,API4 apiStyle
|
|
```
|