vzcode 1.45.0 → 1.47.0

package/src/client/VZSidebar/AIChat/styles.scss

@@ -2,7 +2,84 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  padding: 0;
+}
+
+.ai-chat-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 20px;
+  overflow-y: auto;
+
+  .ai-chat-empty-icon {
+    font-size: 42px;
+    margin-bottom: 15px;
+  }
+
+  .ai-chat-empty-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--vh-color-neutral-04);
+    margin-bottom: 15px;
+  }
+
+  .ai-chat-empty-text {
+    font-size: 14px;
+    color: var(--vh-color-neutral-04);
+    margin-bottom: 20px;
+    line-height: 1.5;
+  }
+
+  .ai-chat-empty-examples {
+    background: var(--vh-color-neutral-02);
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 20px;
+    text-align: left;
+    width: 100%;
+
+    h4 {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--vh-color-neutral-04);
+      margin-bottom: 10px;
+    }
+
+    .ai-chat-suggested-prompts {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin: 0;
+
+      .ai-chat-suggested-prompt {
+        background: var(--vh-color-neutral-03);
+        border: 1px solid var(--vh-color-neutral-04);
+        border-radius: 6px;
+        padding: 8px 12px;
+        font-size: 13px;
+        color: var(--vh-color-neutral-04);
+        text-align: left;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        line-height: 1.4;
+
+        &:hover {
+          background: var(--vh-color-neutral-04);
+          color: var(--vh-color-neutral-01);
+          border-color: var(--vh-color-primary-01);
+        }
+
+        &:active {
+          background: var(--vh-color-primary-01);
+          color: white;
+          border-color: var(--vh-color-primary-01);
+        }
+      }
+    }
+  }
 }
 
 .ai-chat-messages {
@@ -10,6 +87,7 @@
   overflow-y: auto;
   margin-bottom: 10px;
   padding-right: 5px;
+  scroll-behavior: smooth;
 
   &::-webkit-scrollbar {
     width: 6px;
@@ -194,13 +272,117 @@
   }
 }
 
+.ai-chat-error {
+  margin: 10px 0;
+  padding: 0;
+  border-radius: 8px;
+  background: rgba(220, 53, 69, 0.1);
+  border: 1px solid rgba(220, 53, 69, 0.3);
+
+  .ai-chat-error-content {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    gap: 10px;
+
+    .ai-chat-error-icon {
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+
+    .ai-chat-error-message {
+      flex: 1;
+      font-size: 14px;
+      color: #dc3545;
+      line-height: 1.4;
+      font-weight: 500;
+    }
+
+    .ai-chat-error-dismiss {
+      background: none;
+      border: none;
+      color: #dc3545;
+      font-size: 18px;
+      font-weight: bold;
+      cursor: pointer;
+      padding: 0;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      transition: background-color 0.2s ease;
+      flex-shrink: 0;
+
+      &:hover {
+        background: rgba(220, 53, 69, 0.1);
+      }
+
+      &:focus {
+        outline: 2px solid rgba(220, 53, 69, 0.3);
+        outline-offset: 1px;
+      }
+    }
+  }
+}
+
 .ai-chat-input-container {
   border-top: 1px solid var(--vh-color-neutral-02);
   padding-top: 10px;
 }
 
+.ai-chat-mode-toggle {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  .btn-group {
+    justify-content: center;
+  }
+
+  .btn-group .btn {
+    font-size: 12px;
+    font-weight: 500;
+    padding: 4px 12px;
+    border: 1px solid var(--vh-color-neutral-03);
+    background: var(--vh-color-neutral-02);
+    color: var(--vh-color-neutral-04);
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: var(--vh-color-neutral-03);
+      border-color: var(--vh-color-neutral-04);
+    }
+
+    &.btn-primary {
+      background: var(--vh-color-primary-01);
+      border-color: var(--vh-color-primary-01);
+      color: white;
+
+      &:hover {
+        background: var(--vh-color-primary-02);
+        border-color: var(--vh-color-primary-02);
+      }
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  .ai-chat-mode-description {
+    font-size: 11px;
+    color: var(--vh-color-neutral-03);
+    text-align: center;
+    font-style: italic;
+  }
+}
+
 .ai-chat-input-group {
   display: flex;
+  flex-direction: column;
   gap: 8px;
   margin-bottom: 0;
 
@@ -233,6 +415,18 @@
     }
   }
 
+  .ai-chat-input-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    color: var(--vh-color-neutral-03);
+    margin-bottom: 6px;
+
+    .ai-chat-hint {
+      font-style: italic;
+    }
+  }
+
   .ai-chat-send-button {
     background: var(--vh-color-primary-01);
     border: none;
@@ -243,6 +437,8 @@
     font-weight: 500;
     cursor: pointer;
     transition: background-color 0.2s ease;
+    align-self: flex-end;
+    min-width: 80px;
 
     &:hover:not(:disabled) {
       background: var(--vh-color-primary-02);
@@ -254,3 +450,84 @@
     }
   }
 }
+
+// Thinking scratchpad styles
+.thinking-scratchpad {
+  background: var(--vh-color-neutral-02);
+  border: 1px solid var(--vh-color-neutral-03);
+  border-radius: 8px;
+  margin: 10px 0;
+  padding: 0;
+  overflow: hidden;
+  font-size: 13px;
+
+  .thinking-scratchpad-header {
+    background: var(--vh-color-neutral-03);
+    color: var(--vh-color-neutral-04);
+    padding: 8px 12px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .thinking-scratchpad-icon {
+      font-size: 16px;
+    }
+
+    .thinking-scratchpad-title {
+      font-size: 13px;
+    }
+  }
+
+  .thinking-scratchpad-content {
+    padding: 12px;
+    max-height: 200px;
+    overflow-y: auto;
+    background: var(--vh-color-neutral-02);
+
+    // Style markdown content in thinking scratchpad
+    p {
+      margin: 0 0 8px 0;
+      line-height: 1.4;
+      color: var(--vh-color-neutral-04);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    code {
+      background: rgba(0, 0, 0, 0.3);
+      color: #e6e6e6;
+      padding: 1px 4px;
+      border-radius: 3px;
+      font-size: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    ul,
+    ol {
+      margin: 0 0 8px 0;
+      padding-left: 20px;
+
+      li {
+        margin-bottom: 4px;
+        color: var(--vh-color-neutral-04);
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin: 8px 0 6px 0;
+      color: var(--vh-color-neutral-04);
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

package/src/client/VZSidebar/aiCopyPaste.ts

@@ -7,8 +7,12 @@ import {
   mergeFileChanges,
 } from 'editcodewithai';
 import { VizFiles } from '@vizhub/viz-types';
-import { vizFilesToFileCollection } from '@vizhub/viz-utils';
+import {
+  generateRunId,
+  vizFilesToFileCollection,
+} from '@vizhub/viz-utils';
 import JSZip from 'jszip';
+import { generate } from '@langchain/core/dist/utils/fast-json-patch';
 
 export const createAICopyPasteHandlers = (
   files: VizFiles,
@@ -106,6 +110,7 @@ export const createAICopyPasteHandlers = (
         submitOperation((document) => ({
           ...document,
           files: mergedFiles,
+          runId: generateRunId(),
         }));
 
         const fileCount = Object.keys(parsed.files).length;

package/src/client/VZSidebar/index.tsx

@@ -110,7 +110,7 @@ export const VZSidebar = ({
   ),
   aiChatToolTipText = (
     <div>
-      <strong>AI Chat (beta)</strong>
+      <strong>VizBot - AI Code Editor</strong>
     </div>
   ),
 }: {
@@ -184,7 +184,7 @@ export const VZSidebar = ({
     [files, submitOperation],
   );
 
-  const { sidebarWidth } = useContext(
+  const { sidebarWidth, setSidebarView } = useContext(
     SplitPaneResizeContext,
   );
 
@@ -282,6 +282,11 @@ export const VZSidebar = ({
     previousPendingRef.current = pending;
   }, [pending, connected, isConnecting]);
 
+  // Automatically adjust sidebar width when view changes
+  useEffect(() => {
+    setSidebarView(isAIChatOpen);
+  }, [isAIChatOpen, setSidebarView]);
+
   return (
     <div
       className="vz-sidebar"
@@ -307,6 +312,7 @@ export const VZSidebar = ({
               onClick={() => {
                 setIsSearchOpen(false);
                 setIsAIChatOpen(false);
+                setSidebarView(false); // Switch to files view
               }}
             >
               <FolderSVG />
@@ -327,6 +333,7 @@ export const VZSidebar = ({
               onClick={() => {
                 setIsSearchOpen(true);
                 setIsAIChatOpen(false);
+                setSidebarView(false); // Switch to files view (search uses same width as files)
               }}
             >
               <SearchSVG />
@@ -348,6 +355,7 @@ export const VZSidebar = ({
                 onClick={() => {
                   setIsAIChatOpen(true);
                   setIsSearchOpen(false);
+                  setSidebarView(true); // Switch to AI chat view
                 }}
               >
                 <SparklesSVG />

package/src/client/bootstrap.ts

@@ -3,6 +3,8 @@
 // Otherwise we get `Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import`
 import Form from 'react-bootstrap/cjs/Form.js';
 import Button from 'react-bootstrap/cjs/Button.js';
+import ButtonGroup from 'react-bootstrap/cjs/ButtonGroup.js';
+import ToggleButton from 'react-bootstrap/cjs/ToggleButton.js';
 import Modal from 'react-bootstrap/cjs/Modal.js';
 import OverlayTrigger from 'react-bootstrap/cjs/OverlayTrigger.js';
 import Tooltip from 'react-bootstrap/cjs/Tooltip.js';
@@ -10,4 +12,12 @@ import Tooltip from 'react-bootstrap/cjs/Tooltip.js';
 // Pull in custom CSS from vizhub-ui.
 import 'vizhub-ui/dist/vizhub-ui.css';
 
-export { Form, Button, Modal, OverlayTrigger, Tooltip };
+export {
+  Form,
+  Button,
+  ButtonGroup,
+  ToggleButton,
+  Modal,
+  OverlayTrigger,
+  Tooltip,
+};

package/src/client/useActions.ts

@@ -168,6 +168,17 @@ export const useActions = (
     });
   }, [dispatch]);
 
+  // Set the AI chat mode (ask or edit)
+  const setAIChatMode = useCallback(
+    (mode: 'ask' | 'edit') => {
+      dispatch({
+        type: 'set_ai_chat_mode',
+        mode,
+      });
+    },
+    [dispatch],
+  );
+
   // True to show the settings modal.
   const setIsSettingsOpen = useCallback(
     (value: boolean) => {
@@ -251,6 +262,7 @@ export const useActions = (
     toggleSearchFocused,
     setIsAIChatOpen,
     toggleAIChatFocused,
+    setAIChatMode,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,

package/src/client/usePrettier/index.ts

@@ -1,7 +1,5 @@
-import { shouldTriggerRun } from '../shouldTriggerRun';
-import { JSONOp } from '../../ot';
 import { VizFileId, VizContent } from '@vizhub/viz-types';
-import { ShareDBDoc } from '../../types';
+import { JSONOp, ShareDBDoc } from '../../types';
 import { useEffect, useRef, useState } from 'react';
 
 // The time in milliseconds by which auto-saving is debounced.

package/src/client/vzReducer/aiChatReducer.ts

@@ -29,3 +29,16 @@ export const toggleAIChatFocusedReducer = (
   }
   return state;
 };
+
+export const setAIChatModeReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'set_ai_chat_mode') {
+    return {
+      ...state,
+      aiChatMode: action.mode,
+    };
+  }
+  return state;
+};

package/src/client/vzReducer/createInitialState.ts

@@ -27,6 +27,7 @@ export const createInitialState = ({
   isSearchOpen: false,
   isAIChatOpen: false,
   aiChatFocused: false,
+  aiChatMode: 'edit',
   isSettingsOpen: false,
   isDocOpen: false,
   editorWantsFocus: false,

package/src/client/vzReducer/index.ts

@@ -33,6 +33,7 @@ import {
 import {
   setIsAIChatOpenReducer,
   toggleAIChatFocusedReducer,
+  setAIChatModeReducer,
 } from './aiChatReducer';
 import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
 import { updatePresenceIndicatorReducer } from './updatePresenceIndicatorReducer';
@@ -62,6 +63,9 @@ export type VZState = {
   // True if the AI chat input should focus on the next render.
   aiChatFocused: boolean;
 
+  // The current AI chat mode: 'ask' or 'edit'
+  aiChatMode: 'ask' | 'edit';
+
   // True to show the settings modal.
   isSettingsOpen: boolean;
 
@@ -133,6 +137,10 @@ export type VZAction =
   // * Toggles focused variable to trigger AI chat input focus
   | { type: 'toggle_ai_chat_focused' }
 
+  // `set_ai_chat_mode`
+  // * Sets the AI chat mode (ask or edit)
+  | { type: 'set_ai_chat_mode'; mode: 'ask' | 'edit' }
+
   // `set_search`
   //  * Sets the current search pattern
   | { type: 'set_search'; value: string }
@@ -212,6 +220,7 @@ const reducers = [
   setIsSearchOpenReducer,
   setIsAIChatOpenReducer,
   toggleAIChatFocusedReducer,
+  setAIChatModeReducer,
   setIsSettingsOpenReducer,
   setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,

package/src/client/vzReducer/searchReducer.test.ts

@@ -2,10 +2,52 @@ import { describe, expect, it } from 'vitest';
 import { setSearchResultsReducer } from './searchReducer';
 import { VZAction, VZState, createInitialState } from '.';
 import { defaultTheme } from '../themes';
+import { ShareDBDoc } from '../../types';
+import { VizContent } from '@vizhub/viz-types';
 
 // Mock ShareDBDoc for testing
-const createMockShareDBDoc = (files: any) => ({
-  data: { files },
+const createMockShareDBDoc = (
+  files: any,
+): ShareDBDoc<VizContent> => ({
+  data: { files, id: 'mock-id' },
+  ingestSnapshot: (snapshot: any, callback: any) => {
+    // No-op for testing
+    if (callback) callback();
+  },
+  subscribe: (callback: any) => {
+    // No-op for testing
+    if (callback) callback();
+  },
+  on: (
+    event: string,
+    callback: (op: any, source: boolean) => void,
+  ) => {
+    // No-op for testing
+  },
+  off: (
+    event: string,
+    callback: (op: any, source: boolean) => void,
+  ) => {
+    // No-op for testing
+  },
+  removeListener: (
+    event: string,
+    callback: (op: any, source: boolean) => void,
+  ) => {
+    // No-op for testing
+  },
+  submitOp: (
+    op: any,
+    options?: any,
+    callback?: () => void,
+  ) => {
+    // No-op for testing
+    if (callback) callback();
+  },
+  whenNothingPending: (callback: () => void) => {
+    // No-op for testing
+    if (callback) callback();
+  },
 });
 
 const initialState: VZState = createInitialState({

package/src/runCode.ts

@@ -1,30 +1,18 @@
+import { generateRunId } from '@vizhub/viz-utils';
 import { SubmitOperation } from './types';
 import { VizContent } from '@vizhub/viz-types';
 
 /**
- * Creates a runCode function that triggers code execution by flashing `isInteracting` to `true`.
+ * Creates a runCode function that triggers code execution by changing the `runId` in the content.
  * This works for both client-side (with submitOperation) and server-side (with ShareDB document).
  */
-export const createRunCodeFunction = (
-  submitOperation: SubmitOperation,
-) => {
-  return () => {
-    // Use the unified submitOperation approach for both client and server
+export const createRunCodeFunction =
+  (submitOperation: SubmitOperation) => () => {
     submitOperation((content: VizContent) => ({
       ...content,
-      isInteracting: true,
+      runId: generateRunId(),
     }));
-
-    setTimeout(() => {
-      // This somewhat cryptic logic
-      // deletes the `isInteracting` property
-      // from the document.
-      submitOperation(
-        ({ isInteracting, ...newDocument }) => newDocument,
-      );
-    }, 100);
   };
-};
 
 /**
  * Creates a runCodeRef object compatible with React refs.

package/src/server/aiChatHandler/aiEditing.ts

@@ -12,6 +12,42 @@ import {
 // Useful for debugging and testing purposes, e.g. checking the typing indicator.
 const delayStart = false;
 
+/**
+ * Performs AI chat without editing - just generates a response
+ */
+export const performAIChat = async ({
+  prompt,
+  shareDBDoc,
+  llmFunction,
+}) => {
+  const preparedFiles = prepareFilesForPrompt(
+    shareDBDoc.data.files,
+  );
+  const filesContext = formatMarkdownFiles(preparedFiles);
+
+  // 2. Assemble the final prompt for Q&A mode
+  const fullPrompt = assembleFullPrompt({
+    filesContext,
+    prompt,
+    editFormat: 'whole',
+  });
+
+  if (delayStart) {
+    await new Promise((resolve) =>
+      setTimeout(resolve, 1000),
+    );
+  }
+
+  // Call the LLM function which will handle streaming but won't edit files
+  const result = await llmFunction(fullPrompt);
+
+  return {
+    content: result.content,
+    generationId: result.generationId,
+    diffData: {}, // No file changes in ask mode
+  };
+};
+
 /**
  * Performs AI editing operations using streaming with incremental OT operations
  */
@@ -62,5 +98,6 @@ export const performAIEditing = async ({
     content: result.content,
     generationId: result.generationId,
     diffData,
+    beforeFiles, // Store the snapshot for undo functionality
   };
 };