34 lines
1.4 KiB
Markdown
34 lines
1.4 KiB
Markdown
|
# Functional Spec: UI Layout
|
||
|
|
|
||
|
|
## 1. Global Structure
|
||
|
|
The application uses a **fixed-layout** strategy to maximize chat visibility.
|
||
|
|
|
||
|
|
```text
|
||
|
|
+-------------------------------------------------------+
|
||
|
|
| HEADER (Fixed Height, e.g., 50px) |
|
||
|
|
| [Project: ~/foo/bar] [Model: llama3] [x] Tools |
|
||
|
|
+-------------------------------------------------------+
|
||
|
|
| |
|
||
|
|
| CHAT AREA (Flex Grow, Scrollable) |
|
||
|
|
| |
|
||
|
|
| (User Message) |
|
||
|
|
| (Agent Message) |
|
||
|
|
| |
|
||
|
|
+-------------------------------------------------------+
|
||
|
|
| INPUT AREA (Fixed Height, Bottom) |
|
||
|
|
| [ Input Field ........................... ] [Send] |
|
||
|
|
+-------------------------------------------------------+
|
||
|
|
```
|
||
|
|
|
||
|
|
## 2. Components
|
||
|
|
* **Header:** Contains global context (Project) and session config (Model/Tools).
|
||
|
|
* *Constraint:* Must not scroll away.
|
||
|
|
* **ChatList:** The scrollable container for messages.
|
||
|
|
* **InputBar:** Pinned to the bottom.
|
||
|
|
|
||
|
|
## 3. Styling
|
||
|
|
* Use Flexbox (`flex-direction: column`) on the main container.
|
||
|
|
* Header: `flex-shrink: 0`.
|
||
|
|
* ChatList: `flex-grow: 1`, `overflow-y: auto`.
|
||
|
|
* InputBar: `flex-shrink: 0`.
|