Fix/2196 ask mode

[Rish-it]

Description

Implements an "Ask" mode toggle for the chat interface as requested in issue #2196. This feature adds a dropdown menu in the bottom-left corner of the chat input that allows users to switch between "Build" mode (for making code changes) and "Ask" mode (for asking questions about the project without building anything).

Key Features:

• ChatModeToggle Component: Dropdown menu with Build and Ask options
• Dynamic Chat Behavior: Different placeholder text and functionality based on selected mode
• Professional UI: Matches existing design system with custom SVG icons
• Accessibility: Full ARIA support, keyboard navigation, and proper disabled states
• Type Safety: Complete TypeScript implementation with proper interfaces

Related Issues

Closes #2196

Type of Change

• [x] New feature
• [ ] Bug fix
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe):

Screenshots (if applicable)

https://github.com/user-attachments/assets/106eca3b-6b80-49e3-a3fa-b5d79da8f2ec

Additional Notes

Technical Approach:

• Leverages existing ChatType.EDIT and ChatType.ASK enums
• Integrates seamlessly with current chat infrastructure
• Uses established UI components (Button, DropdownMenu, Icons)
• Maintains backward compatibility with existing chat functionality

This feature enhances the user experience by clearly distinguishing between building/editing actions and general project inquiries, making the chat interface more intuitive and purpose-driven.

---

[!IMPORTANT] Adds 'Build' and 'Ask' mode toggle to chat interface with dynamic behavior and UI updates.

• Behavior:
  • Adds ChatModeToggle component in chat-mode-toggle.tsx for switching between 'Build' and 'Ask' modes.
  • Updates ChatInput in index.tsx to use chatMode state for dynamic placeholder text and message sending.
  • Modifies ActionButtons in action-buttons.tsx to include dropdown for image upload and screenshot.
• UI Components:
  • Integrates DropdownMenu, DropdownMenuItem, and DropdownMenuTrigger for mode selection and action buttons.
  • Adds Build and Ask icons to icons/index.tsx.
• Chat Context:
  • Updates getChatContext() in context.ts to maintain existing image contexts.
• Misc:
  • Ensures full ARIA support and keyboard navigation for accessibility.
  • Implements TypeScript interfaces for type safety.

^{This description was created by for 0ae77b62e9536ffa87bce43f3128bcac374708ae. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.

[Rish-it]

I feel that the current implementation in

/packages/ai/src/prompt/edit/edit.ts

is already quite heavily geared towards generating coding instructions we already have a build mode for that. Since we've introduced the new mode, I believe its purpose should be a bit different more aligned with a consultant or advisor approach. Instead of being too code-focused, it should prioritize providing clear explanations and reasoning behind suggestions, while still including relevant code snippets where helpful (similar to how Cursor handles it). The key is to give users the context and understanding, and then offer them the option to apply the changes if they choose to but not overwhelm them with code-first outputs. lmk if you are taking this & thoughts?

[Kitenite]

Yeah I agree, in ask mode we'd want to change the system prompt and instructions to at least omit the code part.