WIP: chatbox whitespace fix

.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(taskkill //F //PID 29780)",
+      "Bash(npm run start:*)",
+      "Bash(tasklist:*)",
+      "Bash(findstr:*)",
+      "Bash(curl:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

.cursor/commands/scratchpad.md

@@ -0,0 +1,63 @@
+## Chat Feature Architecture & Flow Summary
+
+### Layers
+- **UI Layer**: Renders chat view, input, and handles submit triggers.
+- **State/Store Layer**: Manages settings, sessions, current session, and toasts.
+- **Service Layer**: Calls LLM API and streams responses.
+- **Platform (Electron)**: Hosts renderer, preload bridge, theme updates.
+
+### Key Modules
+- **UI**: `src/devtools/App.tsx`
+  - Renders message list and `MessageInput`.
+  - Wires `onSubmit` to append user message, add assistant placeholder, and call `generate`.
+- **Message Rendering**: `src/devtools/Block.tsx`
+  - Displays each `Message` (Markdown rendered to HTML).
+- **Types/Factories**: `src/devtools/types.ts`
+  - `Message`, `Session`, `createMessage`, `createSession`.
+- **Store/State**: `src/devtools/store.ts`
+  - `updateChatSession`, `createEmptyChatSession`, toasts.
+- **Service**: `src/devtools/client.ts`
+  - `replay` posts to `${settings.apiHost}/v1/chat/completions`, streams tokens, returns full text.
+- **Electron Host**: `src/index.ts`, `src/preload.ts`
+  - Window creation, CSP, devtools, theme events exposed via preload.
+
+### Send Message Flow
+1. User types in `MessageInput` and presses Enter or clicks SEND.
+2. `MessageInput.submit` prevents default, validates, and calls `onSubmit` with a new user `Message`.
+3. `Main.onSubmit` appends user message + assistant placeholder, updates store, calls `generate`.
+4. `generate` calls `client.replay` to stream assistant content; updates the placeholder via store.
+5. UI re-renders with updated messages; assistant content streams live.
+
+### Event Wiring
+- Enter-to-send: `TextField.onKeyDown` → `submit()`.
+- Button-to-send: `<form onSubmit={submit}>` + `<Button type='submit'>`.
+
+### Current Validation Issue
+- `MessageInput.submit` checks `messageInput.length === 0` only; whitespace-only strings pass and create empty-looking messages.
+
+### Proposed Fix (Input Boundary)
+- In `MessageInput.submit` (in `src/devtools/App.tsx`):
+  - `const trimmed = messageInput.trim()`
+  - `if (trimmed.length === 0) return;`
+  - `props.onSubmit(createMessage('user', trimmed))`
+  - `setMessageInput('')`
+
+### Impact
+- Blocks whitespace-only messages consistently for both Enter and button submits.
+- No changes required to `onSubmit`, store, or service layers.
+
+### QA Checklist (Manual)
+- Whitespace-only input (spaces): press Enter → no message added.
+- Whitespace-only input (tabs/newlines via Shift+Enter): SEND/Enter → no message added.
+- Leading/trailing spaces: type `  hello  ` → message saved/displayed as `hello`.
+- Internal spaces preserved: type `hello   world` → renders with 3 spaces.
+- Both paths: verify with Enter and with SEND button.
+- Normal flow: send a regular prompt and confirm assistant streams a response.
+
+### Notes for Future Automated Tests
+- Component-level test for `MessageInput.submit`:
+  - Given input `"   "` → onSubmit not called.
+  - Given input `"  hi  "` → onSubmit called with `"hi"`.
+- Render test for `Block` with `whiteSpace: 'pre-wrap'`:
+  - Given content `"hello   world"` → DOM text includes 3 spaces.
+

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

explore_use_cases.md

@@ -0,0 +1,85 @@
+# Explore Use Cases
+
+This document explores various use cases for the Chatbox application.
+
+## Use Cases
+
+### 1. AI Chat and Conversation
+- **Description**: Users can have conversations with AI models using OpenAI's API
+- **Features**:
+  - Streaming responses
+  - Multiple chat sessions
+  - Message history management
+  - Markdown rendering
+
+### 2. Prompt Debugging and Management
+- **Description**: Design, test, and refine prompts for AI interactions
+- **Features**:
+  - Edit messages and roles (system, user, assistant)
+  - Refresh/resend messages
+  - Copy and quote messages
+  - Session management
+
+### 3. Session Management
+- **Description**: Organize conversations into separate sessions
+- **Features**:
+  - Create new chat sessions
+  - Switch between sessions
+  - Delete sessions
+  - Copy sessions
+  - Auto-generate session names
+
+### 4. Local Data Storage
+- **Description**: All chat data is stored locally
+- **Features**:
+  - No data sent to external servers (except API)
+  - Privacy-focused
+  - Data persistence across sessions
+
+### 5. Custom API Host Configuration
+- **Description**: Support for custom API endpoints
+- **Features**:
+  - Configure custom API host
+  - Use with OpenAI-compatible APIs
+  - Self-hosted API support
+
+### 6. Code and Content Formatting
+- **Description**: Rich text rendering and formatting
+- **Features**:
+  - Markdown support
+  - Code syntax highlighting
+  - LaTeX math rendering
+  - Word and token counting
+
+## Use Case Scenarios
+
+### Scenario 1: Developer Building an AI Application
+- Use Chatbox to test and refine prompts before integrating into application
+- Debug API responses and understand model behavior
+- Experiment with different prompt structures
+
+### Scenario 2: Content Creator
+- Generate content ideas and drafts
+- Refine writing style through iterative prompts
+- Manage multiple projects through separate sessions
+
+### Scenario 3: Researcher
+- Conduct experiments with different AI models
+- Compare responses across different prompts
+- Document findings in organized sessions
+
+### Scenario 4: Alternative to ChatGPT Plus
+- Cost-effective alternative with pay-per-use pricing
+- More control over API parameters
+- Local data storage for privacy
+
+## Future Use Cases
+
+- [ ] Multi-language support
+- [ ] Code block copying
+- [ ] Dark mode
+- [ ] Stop generation button
+- [ ] Drag-and-drop session organization
+- [ ] Advanced prompt and parameter configuration
+
+