# jevgenijvoronov/syntx-ai-chat architecture

> Architecture diagram of the GitHub repository jevgenijvoronov/syntx-ai-chat, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jevgenijvoronov/syntx-ai-chat
- Repository: https://github.com/jevgenijvoronov/syntx-ai-chat
- Video tour (about a minute): https://gitdiagram.com/jevgenijvoronov/syntx-ai-chat/video

## Overview

HI dev is a responsive Vue chat app for conversations with famous-person personas. Users select or create a chat, send messages, and receive Gemini-generated replies (with a documented local-mock mode); chats and correspondence persist locally. The graph follows routing and message dispatch through the sampled components and state/service code. New-chat modal internals and desktop layout wiring are not sampled, so their downstream behavior is left unspecified.

Main entry points: [`src/components/ChatSidebar.vue`](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ChatSidebar.vue) (Chat sidebar), [`src/components/ChatWindow.vue`](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ChatWindow.vue) (Chat window), [`src/App.vue`](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/App.vue) (Root app), [`src/composables/useMessages.ts`](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/composables/useMessages.ts) (Message workflow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Application shell"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_app["Root app<br/>[App.vue]"]
  node_router["Chat router<br/>[index.ts]"]
  node_desktop["Desktop layout<br/>[DesktopLayout.vue]"]
  node_mobile["Mobile layout<br/>[MobileLayout.vue]"]
  node_chatview["Chat view<br/>[ChatView.vue]"]
end

subgraph group_interface["Chat interface"]
  node_sidebar["Chat sidebar<br/>[ChatSidebar.vue]"]
  node_newchat["New chat modal<br/>[NewChatModal.vue]"]
  node_window["Chat window<br/>[ChatWindow.vue]"]
  node_input["Message input<br/>[MessageInput.vue]"]
  node_messageitem["Message item<br/>[MessageItem.vue]"]
  node_theme["Theme controls<br/>[ThemeToggle.vue]"]
end

subgraph group_conversation["Conversation flow"]
  node_messages["Message workflow<br/>[useMessages.ts]"]
end

subgraph group_state["State and integrations"]
  node_store[("Chat state<br/>[chat.ts]")]
  node_gemini["Persona reply service<br/>[gemini.ts]"]
  node_themecomp["Theme state<br/>[useTheme.ts]"]
end

node_user(("User"))
node_ai{{"Google Gemini"}}
node_local[("Browser local storage")]

node_user -->|"selects or creates chat"| node_sidebar
node_user -->|"enters message"| node_input
node_bootstrap -->|"mounts"| node_app
node_app -->|"renders"| node_desktop
node_app -->|"renders"| node_mobile
node_app -->|"provides theme"| node_themecomp
node_router -->|"routes to"| node_chatview
node_mobile -->|"renders"| node_sidebar
node_mobile -->|"hosts routed view"| node_router
node_desktop -->|"renders"| node_sidebar
node_desktop -->|"hosts routed view"| node_router
node_sidebar -->|"navigates chats"| node_router
node_sidebar -->|"reads chats"| node_store
node_sidebar -->|"opens modal"| node_newchat
node_window -->|"uses workflow"| node_messages
node_window -->|"reads chat name"| node_store
node_window -->|"renders messages"| node_messageitem
node_window -->|"renders input"| node_input
node_input -->|"submits text"| node_messages
node_messages -->|"reads and saves messages"| node_store
node_messages -->|"requests reply"| node_gemini
node_gemini -.->|"sends prompt and history"| node_ai
node_store -->|"persists state"| node_local
node_theme -->|"toggles theme"| node_themecomp

click node_bootstrap "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/main.ts"
click node_app "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/App.vue"
click node_router "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/router/index.ts"
click node_desktop "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/layouts/DesktopLayout.vue"
click node_mobile "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/layouts/MobileLayout.vue"
click node_chatview "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/views/ChatView.vue"
click node_sidebar "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ChatSidebar.vue"
click node_newchat "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/NewChatModal.vue"
click node_window "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ChatWindow.vue"
click node_input "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/MessageInput.vue"
click node_messageitem "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/MessageItem.vue"
click node_theme "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ThemeToggle.vue"
click node_messages "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/composables/useMessages.ts"
click node_store "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/stores/chat.ts"
click node_gemini "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/services/gemini.ts"
click node_themecomp "https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/composables/useTheme.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bootstrap,node_app,node_router,node_desktop,node_mobile,node_chatview,node_user toneBlue
class node_sidebar,node_newchat,node_window,node_input,node_messageitem,node_theme,node_local toneAmber
class node_messages toneMint
class node_store,node_gemini,node_themecomp toneRose
class node_ai toneIndigo
```

## Components

### Application shell

- [App bootstrap](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/main.ts): `src/main.ts`
- [Root app](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/App.vue): `src/App.vue`
- [Chat router](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/router/index.ts): `src/router/index.ts`
- [Desktop layout](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/layouts/DesktopLayout.vue): `src/layouts/DesktopLayout.vue`
- [Mobile layout](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/layouts/MobileLayout.vue): `src/layouts/MobileLayout.vue`
- [Chat view](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/views/ChatView.vue): `src/views/ChatView.vue`

### Chat interface

- [Chat sidebar](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ChatSidebar.vue): `src/components/ChatSidebar.vue`
- [New chat modal](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/NewChatModal.vue): `src/components/NewChatModal.vue`
- [Chat window](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ChatWindow.vue): `src/components/ChatWindow.vue`
- [Message input](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/MessageInput.vue): `src/components/MessageInput.vue`
- [Message item](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/MessageItem.vue): `src/components/MessageItem.vue`
- [Theme controls](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/components/ThemeToggle.vue): `src/components/ThemeToggle.vue`

### Conversation flow

- [Message workflow](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/composables/useMessages.ts): `src/composables/useMessages.ts`

### State and integrations

- [Chat state](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/stores/chat.ts): `src/stores/chat.ts`
- [Persona reply service](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/services/gemini.ts): `src/services/gemini.ts`
- [Theme state](https://github.com/jevgenijvoronov/syntx-ai-chat/blob/main/src/composables/useTheme.ts): `src/composables/useTheme.ts`

### Other components

- **User**
- **Google Gemini**
- **Browser local storage**

## Connections

- User → Chat sidebar: selects or creates chat
- User → Message input: enters message
- App bootstrap → Root app: mounts
- Root app → Desktop layout: renders
- Root app → Mobile layout: renders
- Root app → Theme state: provides theme
- Chat router → Chat view: routes to
- Mobile layout → Chat sidebar: renders
- Mobile layout → Chat router: hosts routed view
- Desktop layout → Chat sidebar: renders
- Desktop layout → Chat router: hosts routed view
- Chat sidebar → Chat router: navigates chats
- Chat sidebar → Chat state: reads chats
- Chat sidebar → New chat modal: opens modal
- Chat window → Message workflow: uses workflow
- Chat window → Chat state: reads chat name
- Chat window → Message item: renders messages
- Chat window → Message input: renders input
- Message input → Message workflow: submits text
- Message workflow → Chat state: reads and saves messages
- Message workflow → Persona reply service: requests reply
- Persona reply service → Google Gemini: sends prompt and history
- Chat state → Browser local storage: persists state
- Theme controls → Theme state: toggles theme