feat: add chat settings (#1911)

* refactor: ai

* add user settings schema, query and mutation

* hide mini chat and suggetion

* protect procedures

* working auto apply

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/canvas/frame/right-click.tsx

@@ -1,7 +1,6 @@
 import { Hotkey } from '@/components/hotkey';
 import { IDE } from '@/components/ide';
 import { useEditorEngine } from '@/components/store/editor';
-import { useUserManager } from '@/components/store/user';
 import { DEFAULT_IDE, EditorTabValue, type DomElement } from '@onlook/models';
 import {
     ContextMenu,
@@ -32,9 +31,8 @@ interface MenuItem {
 
 export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
     const editorEngine = useEditorEngine();
-    const userManager = useUserManager();
     const [menuItems, setMenuItems] = useState<MenuItem[][]>([]);
-    const ide = IDE.fromType(userManager.settings.settings?.editor?.ideType ?? DEFAULT_IDE);
+    const ide = IDE.fromType(DEFAULT_IDE);
 
     useEffect(() => {
         updateMenuItems();

apps/web/client/src/app/project/[id]/_components/canvas/hotkeys/delete.tsx

@@ -1,11 +1,9 @@
-// import { useEditorEngine } from '@/components/Context';
 import { Hotkey } from '@/components/hotkey';
 import { useEditorEngine } from '@/components/store/editor';
 import { DefaultSettings } from '@onlook/constants';
 import { EditorMode, EditorTabValue } from '@onlook/models';
 import type { ReactNode } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { DeleteKey } from './delete';
 
 export const HotkeysArea = ({ children }: { children: ReactNode }) => {
     const editorEngine = useEditorEngine();
@@ -56,6 +54,7 @@ export const HotkeysArea = ({ children }: { children: ReactNode }) => {
     useHotkeys(Hotkey.ENTER.command, () => editorEngine.text.editSelectedElement());
     useHotkeys(Hotkey.REFRESH_LAYERS.command, () => editorEngine.refreshLayers());
     useHotkeys(Hotkey.OPEN_DEV_TOOL.command, () => editorEngine.inspect());
+    useHotkeys([Hotkey.BACKSPACE.command, Hotkey.DELETE.command], () => editorEngine.elements.delete());
 
     // Group
     useHotkeys(Hotkey.GROUP.command, () => editorEngine.group.groupSelectedElements());
@@ -93,7 +92,6 @@ export const HotkeysArea = ({ children }: { children: ReactNode }) => {
 
     return (
         <>
-            <DeleteKey />
             {children}
         </>
     );

apps/web/client/src/app/project/[id]/_components/canvas/hotkeys/index.tsx

@@ -5,7 +5,6 @@ import { EditorMode } from '@onlook/models';
 import { cn } from '@onlook/ui/utils';
 import { observer } from 'mobx-react-lite';
 import { useMemo } from 'react';
-import { OverlayChat } from './elements/chat';
 import { MeasurementOverlay } from './elements/measurement';
 import { ClickRect } from './elements/rect/click';
 import { HoverRect } from './elements/rect/hover';
@@ -70,12 +69,13 @@ export const Overlay = observer(() => {
                     toRect={overlayState.measurement.toRect}
                 />
             )}
-            {overlayState.clickRects.length > 0 && (
+            {/* TODO: Reenable overlay chat */}
+            {/* {overlayState.clickRects.length > 0 && (
                 <OverlayChat
                     elementId={editorEngine.elements.selected[0]?.domId ?? ''}
                     selectedEl={overlayState.clickRects[0] ?? null}
                 />
-            )}
+            )} */}
         </div>
     );
 });

apps/web/client/src/app/project/[id]/_components/canvas/overlay/index.tsx

@@ -1,7 +1,6 @@
 import { Hotkey } from '@/components/hotkey';
 import { IDE } from '@/components/ide';
 import { useEditorEngine } from '@/components/store/editor';
-import { useUserManager } from '@/components/store/user';
 import { EditorTabValue } from '@onlook/models/editor';
 import type { DomElement } from '@onlook/models/element';
 import { DEFAULT_IDE } from '@onlook/models/ide';
@@ -34,9 +33,8 @@ interface MenuItem {
 
 export const RightClickMenu = observer(({ children }: RightClickMenuProps) => {
     const editorEngine = useEditorEngine();
-    const userManager = useUserManager();
     const [menuItems, setMenuItems] = useState<MenuItem[][]>([]);
-    const ide = IDE.fromType(userManager.settings.settings?.editor?.ideType ?? DEFAULT_IDE);
+    const ide = IDE.fromType(DEFAULT_IDE);
 
     useEffect(() => {
         updateMenuItems();

apps/web/client/src/app/project/[id]/_components/right-click-menu/index.tsx

@@ -15,7 +15,7 @@ import { observer } from 'mobx-react-lite';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 import { InputContextPills } from '../context-pills/input-context-pills';
-import { Suggestions, type SuggestionsRef } from '../suggestions';
+import { type SuggestionsRef } from '../suggestions';
 import { ActionButtons } from './action-buttons';
 
 export const ChatInput = observer(() => {
@@ -236,7 +236,8 @@ export const ChatInput = observer(() => {
                 }
             }}
         >
-            <Suggestions
+            {/* TODO: Reenable suggestions */}
+            {/* <Suggestions
                 ref={suggestionRef}
                 disabled={disabled}
                 inputValue={inputValue}
@@ -254,7 +255,7 @@ export const ChatInput = observer(() => {
                         textareaRef.current?.focus();
                     }
                 }}
-            />
+            /> */}
             <div className="flex flex-col w-full p-4">
                 <InputContextPills />
                 <Textarea

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-input/index.tsx

@@ -1,6 +1,5 @@
 import { useEditorEngine } from '@/components/store/editor';
 import { useUserManager } from '@/components/store/user';
-import { DefaultSettings } from '@onlook/constants';
 import type { ChatSettings } from '@onlook/models';
 import { EditorTabValue } from '@onlook/models';
 import {
@@ -12,8 +11,9 @@ import {
 } from '@onlook/ui/dropdown-menu';
 import { Icons } from '@onlook/ui/icons';
 import { cn } from '@onlook/ui/utils';
+import { observer } from 'mobx-react-lite';
 
-export const ChatPanelDropdown = ({
+export const ChatPanelDropdown = observer(({
     children,
     isChatHistoryOpen,
     setIsChatHistoryOpen,
@@ -25,7 +25,7 @@ export const ChatPanelDropdown = ({
     const userManager = useUserManager();
     const editorEngine = useEditorEngine();
 
-    const chatSettings = userManager.settings.settings?.chat ?? DefaultSettings.CHAT_SETTINGS;
+    const chatSettings = userManager.settings.settings.chat;
     const selectedTab = editorEngine.state.rightPanelTab;
 
     const updateChatSettings = (e: React.MouseEvent, settings: Partial<ChatSettings>) => {
@@ -39,55 +39,60 @@ export const ChatPanelDropdown = ({
                 <div className="flex items-center">{children}</div>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="min-w-[220px]">
+
                 <DropdownMenuItem
                     className="flex items-center py-1.5"
                     onClick={(e) => {
                         updateChatSettings(e, {
-                            showSuggestions: !chatSettings.showSuggestions,
+                            autoApplyCode: !chatSettings.autoApplyCode,
                         });
                     }}
                 >
                     <Icons.Check
                         className={cn(
                             'mr-2 h-4 w-4',
-                            chatSettings.showSuggestions ? 'opacity-100' : 'opacity-0',
+                            chatSettings.autoApplyCode ? 'opacity-100' : 'opacity-0',
                         )}
                     />
-                    Show suggestions
+                    Auto - apply results
                 </DropdownMenuItem>
                 <DropdownMenuItem
                     className="flex items-center py-1.5"
                     onClick={(e) => {
                         updateChatSettings(e, {
-                            autoApplyCode: !chatSettings.autoApplyCode,
+                            expandCodeBlocks: !chatSettings.expandCodeBlocks,
                         });
                     }}
                 >
                     <Icons.Check
                         className={cn(
                             'mr-2 h-4 w-4',
-                            chatSettings.autoApplyCode ? 'opacity-100' : 'opacity-0',
+                            chatSettings.expandCodeBlocks ? 'opacity-100' : 'opacity-0',
                         )}
                     />
-                    Auto - apply results
+                    Show code while rendering
                 </DropdownMenuItem>
-                <DropdownMenuItem
+
+                {/* TODO: Reenable */}
+                {/* <DropdownMenuItem
                     className="flex items-center py-1.5"
                     onClick={(e) => {
                         updateChatSettings(e, {
-                            expandCodeBlocks: !chatSettings.expandCodeBlocks,
+                            showSuggestions: !chatSettings.showSuggestions,
                         });
                     }}
                 >
                     <Icons.Check
                         className={cn(
                             'mr-2 h-4 w-4',
-                            chatSettings.expandCodeBlocks ? 'opacity-100' : 'opacity-0',
+                            chatSettings.showSuggestions ? 'opacity-100' : 'opacity-0',
                         )}
                     />
-                    Show code while rendering
-                </DropdownMenuItem>
-                <DropdownMenuItem
+                    Show suggestions
+                </DropdownMenuItem> */}
+
+                {/* TODO: Reenable */}
+                {/* <DropdownMenuItem
                     className="flex items-center py-1.5"
                     onClick={(e) => {
                         updateChatSettings(e, {
@@ -102,7 +107,7 @@ export const ChatPanelDropdown = ({
                         )}
                     />
                     Show mini chat
-                </DropdownMenuItem>
+                </DropdownMenuItem> */}
                 <DropdownMenuSeparator />
                 <DropdownMenuItem onClick={() => setIsChatHistoryOpen(!isChatHistoryOpen)}>
                     <Icons.CounterClockwiseClock className="mr-2 h-4 w-4" />
@@ -111,4 +116,4 @@ export const ChatPanelDropdown = ({
             </DropdownMenuContent>
         </DropdownMenu>
     );
-};
+});

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/panel-dropdown.tsx

@@ -4,6 +4,7 @@ import { type ChatConversation, type ChatMessageContext } from '@onlook/models';
 import type { Project } from '@onlook/models/project';
 import type { Message } from 'ai';
 import { makeAutoObservable, reaction } from 'mobx';
+import type { ChatManager } from '..';
 import { AssistantChatMessageImpl } from '../message/assistant';
 import { UserChatMessageImpl } from '../message/user';
 import { ChatConversationImpl, type ChatMessageImpl } from './conversation';
@@ -14,6 +15,7 @@ export class ConversationManager {
     private _conversations: ChatConversation[] = [];
 
     constructor(
+        private chatManager: ChatManager,
         private projectManager: ProjectManager,
     ) {
         makeAutoObservable(this);
@@ -142,6 +144,7 @@ export class ConversationManager {
         }
         const newMessage = AssistantChatMessageImpl.fromMessage(message);
         await this.addMessage(newMessage);
+        this.chatManager.autoApplyCode(newMessage);
         return newMessage;
     }
 

apps/web/client/src/components/store/editor/chat/conversation/index.ts

@@ -25,7 +25,7 @@ export class ChatManager {
         private userManager: UserManager,
     ) {
         this.context = new ChatContext(this.editorEngine, this.projectManager);
-        this.conversation = new ConversationManager(this.projectManager);
+        this.conversation = new ConversationManager(this, this.projectManager);
         this.code = new ChatCodeManager(this, this.editorEngine);
         this.suggestions = new SuggestionManager(this.projectManager);
         makeAutoObservable(this);
@@ -121,16 +121,16 @@ export class ChatManager {
             console.error('No conversation found');
             return null;
         }
-        // Save current changes before sending to AI
+        this.createCommit(userPrompt);
+        return this.conversation.current.getMessagesForStream();
+    }
 
+    createCommit(userPrompt?: string) {
         // TODO: Reenable this
-        // this.projectsManager.versions?.createCommit(
-        //     userPrompt ?? "Save before chat",
+        // this.projectManager.versions?.createCommit(
+        //     "Save before chat",
         //     false,
         // );
-
-        const messages = this.conversation.current.getMessagesForStream();
-        return messages;
     }
 
     autoApplyCode(assistantMessage: AssistantChatMessage) {