Chat Interface
The chat interface is the primary surface for interacting with Codewick’s AI. Every instruction, question, and code change flows through the chat panel, giving you a conversational workflow that keeps context across your entire session.
Message Thread
Section titled “Message Thread”The chat displays a threaded conversation between you and the AI:
- Your messages appear right-aligned in the thread.
- AI responses render full-width, each prefixed with a flame icon, a model label (e.g., Claude Sonnet), and a stage badge indicating which pipeline stage produced the response.
- Messages are displayed in chronological order with clear visual separation.
Streaming Responses
Section titled “Streaming Responses”AI responses stream in word-by-word so you can start reading immediately. An animated dot indicator appears while the model is still generating. You never have to wait for the full response before you begin reviewing.
Pipeline Progress Bar
Section titled “Pipeline Progress Bar”A thin progress bar at the top of the chat panel tracks the current pipeline stage. When a multi-step operation is running (planning, coding, reviewing), you can see exactly where the AI is in the process.
Inline Diff Blocks
Section titled “Inline Diff Blocks”When the AI proposes code changes, they appear as inline diff blocks directly in the response:
- Added lines are highlighted in green.
- Removed lines are highlighted in red.
- Each diff block includes the file path and affected line range.
Accept and Reject Controls
Section titled “Accept and Reject Controls”Every AI response that modifies files shows Accept and Reject buttons:
- Accept applies the proposed changes to your files immediately.
- Reject discards the changes and leaves your files untouched.
You review every change before it touches your code.
Chat Input
Section titled “Chat Input”The chat input sits at the bottom of the panel as a compact pill that expands up to five lines as you type.
Attachments and Mentions
Section titled “Attachments and Mentions”- Paperclip icon — attach files, images, or screenshots to your message.
- @ mention — type
@followed by a filename to reference a specific file in your project. The file’s content is included as context for the AI. - Browser references — click an element in the built-in browser and a reference chip appears automatically in the chat input. See Browser for details.
Sending Messages
Section titled “Sending Messages”Press the amber Send button or hit Enter to send your message. Use Shift + Enter to insert a newline without sending.
Referencing Browser Elements
Section titled “Referencing Browser Elements”Codewick connects the browser and chat so you can point at what you want to change:
- Click an element in the built-in browser.
- A chip describing that element appears in the chat input.
- Type your instruction (e.g., “make this button larger”) and send.
The AI receives the element’s selector, text content, and surrounding HTML so it knows exactly what you are referring to.
Chat History
Section titled “Chat History”Chat history persists per project and per session:
- Reopen a project and your previous conversation is restored.
- Switch sessions within a project to maintain separate conversation threads.
- History is stored locally on your machine.
Keyboard Shortcuts
Section titled “Keyboard Shortcuts”| Action | Shortcut |
|---|---|
| Focus chat input | ⌘ + L |
| Send message | Enter |
| New line in input | Shift + Enter |
| Attach file | Click paperclip or drag-and-drop |
| Mention a file | @ + filename |
Tips for Effective Prompts
Section titled “Tips for Effective Prompts”- Be specific. “Add a loading spinner to the submit button in
LoginForm.tsx” outperforms “add a spinner somewhere.” - Reference files. Use
@mentions so the AI has the right context without guessing. - Iterate. If the first result is close but not perfect, describe what to adjust rather than starting over.
- Use the browser. Click the element you want to change, then describe the change in chat. Visual references eliminate ambiguity.