AskCodi Chat

What is AskCodi Chat?

AskCodi Chat is an advanced AI conversation platform that combines powerful AI models with full conversation persistence, real-time streaming, and professional markdown rendering. It's a complete chat application that saves every conversation to a database, syncs across all your devices in real-time, and supports advanced features like file attachments, vision AI, prompt stacking, and custom agents.

The Chat Interface

The chat interface has four main areas: the left sidebar, the chat messages area, the chat input box, and the optional right sidebar.

Left Sidebar

The left sidebar contains your navigation and conversation history:

• Navigation Links: Dashboard, Prompts, Model Providers, Settings
• New Chat Button: Creates a fresh conversation instantly
• Chat History: Your 50 most recent conversations organized by date
• Date Categories: Today, Yesterday, Previous 7 Days, This Month, Older
• Smart Categorization: Empty categories automatically hide
• Hover Actions: Delete button appears when hovering over conversations
• User Menu: Profile and sign out at the bottom

The chat history updates in real-time. Create a new conversation on your phone, and it appears instantly on your laptop's sidebar.

Main Chat Area (Center)

This is where your conversation happens:

• Top Bar: Model selector dropdown and new chat button
• Message Display: Scrollable conversation with user and AI messages
• Message Bubbles: User messages on the right (blue), AI messages on the left (gray)
• Streaming Indicator: "Thinking..." animation before AI responds
• Auto-scroll: Automatically scrolls to show new messages
• Markdown Rendering: Full GitHub Flavored Markdown with syntax highlighting
• Attachment Display: Images and audio files shown inline

Chat Input Box (Bottom)

The input area contains everything you need to send messages:

• Multi-line Textarea: Automatically expands as you type (Shift+Enter for new line)
• Attachment Button: Upload images and audio files
• Attachment Preview: Shows pending files before sending
• Send Button: Uploads attachments and sends your message

Right Sidebar

The right sidebar is a collapsible panel with advanced features:

• Chat history: Manage previous chats categorized by date
• Agent Builder: Create custom agents and use them in the chat. agent documentation
• Prompts Section: Manage your prompt library and active stack. prompt documentation
• Independent Sections: Each section separately collapsible

Click the floating arrow on the right edge to expand and collapse the sidebar.

File Attachment System

AskCodi Chat supports image and audio attachments with lossless compression and vision AI integration.

Uploading Attachments

Selecting Files:

1. Click the attachment button (paperclip icon) in the chat input
2. File picker opens
3. Select one or more files (images)
4. Files appear in preview area below input

Supported Formats:

Images:

• PNG (lossless)
• JPEG/JPG (near-lossless at quality 1.0)
• WebP (lossless mode)
• GIF (for images, not animations)

File Size Limit: 50MB per file

Preview Area:

After selecting files, you see:

• Image thumbnails with filename
• Remove button (X) to cancel upload
• Files NOT uploaded yet (upload happens on send)

Vision AI Integration

When you attach images to a message, the AI can analyze them:

• Upload images to get AI-powered visual analysis
• Ask questions about images ("What's in this image?")
• Compare multiple images
• Extract text from screenshots
• Analyze layouts, designs, and UI elements

Example Vision Prompts:

• "What objects are in these images?"
• "Describe the differences between these two screenshots"
• "What's the text in this image?"
• "Is there a cat in this photo?"

Conversation Management

Conversation History

Sidebar Organization:

Your 50 most recent conversations appear in the right sidebar, organized by date:

Today: Conversations created or updated today

Yesterday: Conversations from yesterday only

Previous 7 Days: Conversations from 2-7 days ago

This Month: Conversations from 8 days to 30 days ago

Older: Conversations older than 30 days

Smart Categorization:

• Uses date-fns for date calculations
• Categories with no conversations hide automatically
• Memoized categorization (efficient re-renders)
• Real-time updates as conversations change

Conversation Display:

Each conversation shows:

• Title (truncated if too long)
• Timestamp (relative: "2 hours ago", "3 days ago")
• Hover state with delete button
• Active state highlight (blue background)

Switching Conversations

Click to Switch:

1. Click any conversation in the sidebar
2. Chat area updates with conversation messages
3. Model selector updates to conversation's model
4. Prompt stack enriches and loads
5. Scroll resets to bottom

Deleting Conversations

Delete Flow:

1. Hover over conversation in sidebar
2. Delete button (trash icon) appears
3. Click delete button
4. Confirmation dialog appears:
   • "Are you sure you want to delete this conversation?"
   • "This action cannot be undone."
   • Cancel and Delete buttons
5. Click Delete to confirm
6. If active conversation deleted, chat clears

What Gets Deleted:

• Conversation record
• All messages in the conversation
• All attachment records (files in storage remain, but orphaned)
• Prompt stack configuration

No Undo:

Deletion is permanent. There's no recycle bin or recovery. Confirm before deleting important conversations.

Conversation Titles

Auto-Generated:

When you send the first message, the system:

1. Takes your message text
2. Truncates to ~50 characters
3. Saves as conversation title
4. Title appears in sidebar

Model Selection

The model selector dropdown shows all available AI models. Select the model you want to use for your conversation from the dropdown menu. Each conversation remembers which model you selected.

Pro Tips

Tip 1: Use Vision AI for Screenshots

Instead of describing UI issues, take screenshots and attach them:

"What's wrong with this layout? [screenshot attached]"

The AI can see spacing issues, alignment problems, color contrast, etc.

Tip 2: Check Console for Debugging

When something seems wrong, always check the browser console (F12). Most issues show clear error messages there.

Tip 3: Organize Conversations

Use the date-based sidebar categories to quickly find recent or older conversations. The smart categorization automatically organizes your chat history.

Tip 4: Multi-Device Sync

Start a conversation on desktop, continue on mobile, finish on tablet. Everything syncs automatically in real-time across all your devices.

Quick Takeaways

• Real-time streaming shows AI responses as they're generated
• Full conversation persistence with automatic database saves
• Multi-device synchronization keeps all devices in sync
• File attachments with vision AI for image analysis
• Professional markdown rendering with syntax highlighting
• Organized conversation history with smart date categorization
• Delete conversations with confirmation to prevent accidents
• Auto-scrolling keeps newest messages visible