vzcode 1.33.0 → 1.34.0

package/src/client/VZSidebar/styles.scss

@@ -81,176 +81,6 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-
-    .ai-chat-container {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      padding: 10px;
-    }
-
-    .ai-chat-messages {
-      flex: 1;
-      overflow-y: auto;
-      margin-bottom: 10px;
-      padding-right: 5px;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: var(--vh-color-neutral-02);
-        border-radius: 3px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: var(--vh-color-neutral-04);
-        border-radius: 3px;
-      }
-    }
-
-    .ai-chat-message {
-      margin-bottom: 15px;
-
-      &.user {
-        .ai-chat-message-content {
-          background: var(--vh-color-primary-01);
-          color: white;
-          margin-left: 20px;
-          border-radius: 12px 12px 4px 12px;
-        }
-
-        .ai-chat-message-time {
-          text-align: right;
-          margin-right: 5px;
-        }
-      }
-
-      &.assistant {
-        .ai-chat-message-content {
-          background: var(--vh-color-neutral-02);
-          color: var(--vh-color-neutral-04);
-          margin-right: 20px;
-          border-radius: 12px 12px 12px 4px;
-        }
-
-        .ai-chat-message-time {
-          text-align: left;
-          margin-left: 5px;
-        }
-      }
-    }
-
-    .ai-chat-message-content {
-      padding: 10px 12px;
-      font-size: 14px;
-      line-height: 1.4;
-      word-wrap: break-word;
-    }
-
-    .ai-chat-message-time {
-      font-size: 11px;
-      color: var(--vh-color-neutral-03);
-      margin-top: 4px;
-    }
-
-    .ai-chat-typing {
-      display: flex;
-      gap: 4px;
-      align-items: center;
-
-      span {
-        width: 6px;
-        height: 6px;
-        background: var(--vh-color-neutral-03);
-        border-radius: 50%;
-        animation: typing 1.4s infinite ease-in-out;
-
-        &:nth-child(1) {
-          animation-delay: -0.32s;
-        }
-        &:nth-child(2) {
-          animation-delay: -0.16s;
-        }
-        &:nth-child(3) {
-          animation-delay: 0s;
-        }
-      }
-    }
-
-    .ai-chat-input-container {
-      border-top: 1px solid var(--vh-color-neutral-02);
-      padding-top: 10px;
-    }
-
-    .ai-chat-input-group {
-      display: flex;
-      gap: 8px;
-      margin-bottom: 0;
-
-      textarea {
-        flex: 1;
-        background: var(--vh-color-neutral-02);
-        border: 1px solid var(--vh-color-neutral-03);
-        color: var(--vh-color-neutral-04);
-        border-radius: 8px;
-        padding: 8px 10px;
-        font-size: 14px;
-        font-family: var(--vzcode-font-family);
-        resize: none;
-        min-height: 36px;
-
-        &:focus {
-          outline: none;
-          border-color: var(--vh-color-primary-01);
-          box-shadow: 0 0 0 2px rgba(38, 67, 153, 0.2);
-        }
-
-        &::placeholder {
-          color: var(--vh-color-neutral-03);
-        }
-
-        &:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-      }
-
-      .ai-chat-send-button {
-        background: var(--vh-color-primary-01);
-        border: none;
-        color: white;
-        border-radius: 8px;
-        padding: 8px 16px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-
-        &:hover:not(:disabled) {
-          background: var(--vh-color-primary-02);
-        }
-
-        &:disabled {
-          background: var(--vh-color-neutral-03);
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-
-  @keyframes typing {
-    0%,
-    80%,
-    100% {
-      transform: scale(0.8);
-      opacity: 0.5;
-    }
-    40% {
-      transform: scale(1);
-      opacity: 1;
-    }
   }
 
   .sidebar-search .arrow-wrapper {

package/src/client/diff.js

@@ -1,6 +1,6 @@
 import jsondiff from 'json0-ot-diff';
 import diffMatchPatch from 'diff-match-patch';
-import { json1Presence, textUnicode } from '../ot';
+import { json1Presence, textUnicode } from '../ot.js';
 
 export const diff = (a, b) =>
   jsondiff(

package/src/client/featureFlags.ts

@@ -1,4 +1,4 @@
 export const enableLiveKit =
   import.meta.env.VITE_ENABLE_LIVEKIT === 'true';
 
-export const enableAIChat = false;
+export const enableAIChat = true;

package/src/ot.js

@@ -1,5 +1,13 @@
+// Operational Transformation (OT) utilities.
 // This file is the central point where the OT types are imported.
 // Localized to one file so it's easy to change it in future.
 import OTJSON1Presence from 'sharedb-client-browser/dist/ot-json1-presence-umd.cjs';
-const { json1Presence, textUnicode } = OTJSON1Presence;
-export { json1Presence, textUnicode };
+
+export const { json1Presence, textUnicode } =
+  OTJSON1Presence;
+
+// The OT type used throughout the codebase.
+export const otType = json1Presence.type;
+
+// Applies an OT op to an object.
+export const apply = otType.apply;

package/src/server/aiChatHandler/aiEditing.js

@@ -0,0 +1,42 @@
+import { performAiEdit } from 'editcodewithai';
+import {
+  clearAIScratchpadAndStatus,
+  updateFiles,
+  setIsInteracting,
+} from './chatOperations.js';
+
+/**
+ * Performs AI editing operations on the files
+ */
+export const performAIEditing = async (
+  shareDBDoc,
+  chatId,
+  content,
+  files,
+  llmFunction,
+) => {
+  const editResult = await performAiEdit({
+    prompt: content,
+    files,
+    llmFunction,
+    apiKey: process.env.VIZHUB_EDIT_WITH_AI_API_KEY,
+  });
+
+  // Clear the scratchpad and update status
+  clearAIScratchpadAndStatus(
+    shareDBDoc,
+    chatId,
+    'Done editing with AI.',
+  );
+
+  // Apply AI edits to files
+  updateFiles(shareDBDoc, editResult.changedFiles);
+
+  // Wait for propagation
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  // Unset isInteracting
+  setIsInteracting(shareDBDoc, false);
+
+  return editResult;
+};

package/src/server/aiChatHandler/chatOperations.js

@@ -0,0 +1,195 @@
+import { dateToTimestamp } from '@vizhub/viz-utils';
+import { diff } from '../../client/diff.js';
+
+/**
+ * Ensures the chats object exists in the ShareDB document
+ */
+export const ensureChatsExist = (shareDBDoc) => {
+  if (!shareDBDoc.data.chats) {
+    const op = diff(shareDBDoc.data, {
+      ...shareDBDoc.data,
+      chats: {},
+    });
+    shareDBDoc.submitOp(op);
+  }
+};
+
+/**
+ * Ensures a specific chat exists in the ShareDB document
+ */
+export const ensureChatExists = (shareDBDoc, chatId) => {
+  if (!shareDBDoc.data.chats[chatId]) {
+    const op = diff(shareDBDoc.data, {
+      ...shareDBDoc.data,
+      chats: {
+        ...shareDBDoc.data.chats,
+        [chatId]: {
+          id: chatId,
+          messages: [],
+          createdAt: dateToTimestamp(new Date()),
+          updatedAt: dateToTimestamp(new Date()),
+        },
+      },
+    });
+    shareDBDoc.submitOp(op);
+  }
+};
+
+/**
+ * Adds a user message to the chat
+ */
+export const addUserMessage = (
+  shareDBDoc,
+  chatId,
+  content,
+) => {
+  const userMessage = {
+    id: `user-${Date.now()}`,
+    role: 'user',
+    content: content,
+    timestamp: dateToTimestamp(new Date()),
+  };
+
+  const userMessageOp = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        messages: [
+          ...shareDBDoc.data.chats[chatId].messages,
+          userMessage,
+        ],
+        updatedAt: dateToTimestamp(new Date()),
+      },
+    },
+  });
+  shareDBDoc.submitOp(userMessageOp);
+
+  return userMessage;
+};
+
+/**
+ * Updates AI status in the chat
+ */
+export const updateAIStatus = (
+  shareDBDoc,
+  chatId,
+  status,
+) => {
+  const op = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        aiStatus: status,
+      },
+    },
+  });
+  shareDBDoc.submitOp(op);
+};
+
+/**
+ * Updates AI scratchpad content
+ */
+export const updateAIScratchpad = (
+  shareDBDoc,
+  chatId,
+  content,
+) => {
+  const op = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        aiScratchpad: content,
+      },
+    },
+  });
+  shareDBDoc.submitOp(op);
+};
+
+/**
+ * Clears AI scratchpad and updates status
+ */
+export const clearAIScratchpadAndStatus = (
+  shareDBDoc,
+  chatId,
+  status,
+) => {
+  const op = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        aiScratchpad: undefined,
+        aiStatus: status,
+      },
+    },
+  });
+  shareDBDoc.submitOp(op);
+};
+
+/**
+ * Adds an AI response message to the chat
+ */
+export const addAIMessage = (
+  shareDBDoc,
+  chatId,
+  content,
+) => {
+  const aiResponse = {
+    id: Date.now() + 1,
+    role: 'assistant',
+    content: content || 'AI edit completed successfully.',
+    timestamp: dateToTimestamp(new Date()),
+  };
+
+  const messageOp = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    chats: {
+      ...shareDBDoc.data.chats,
+      [chatId]: {
+        ...shareDBDoc.data.chats[chatId],
+        messages: [
+          ...shareDBDoc.data.chats[chatId].messages,
+          aiResponse,
+        ],
+        updatedAt: dateToTimestamp(new Date()),
+        aiStatus: undefined,
+      },
+    },
+  });
+  shareDBDoc.submitOp(messageOp);
+
+  return aiResponse;
+};
+
+/**
+ * Updates files in the ShareDB document
+ */
+export const updateFiles = (shareDBDoc, files) => {
+  const filesOp = diff(shareDBDoc.data, {
+    ...shareDBDoc.data,
+    files: files,
+    isInteracting: true,
+  });
+  shareDBDoc.submitOp(filesOp);
+};
+
+/**
+ * Sets isInteracting flag
+ */
+export const setIsInteracting = (
+  shareDBDoc,
+  isInteracting,
+) => {
+  const interactingOp = diff(
+    { isInteracting: !isInteracting },
+    { isInteracting: isInteracting },
+  );
+  shareDBDoc.submitOp(interactingOp);
+};

package/src/server/aiChatHandler/errorHandling.js

@@ -0,0 +1,53 @@
+import { dateToTimestamp } from '@vizhub/viz-utils';
+import { diff } from '../../client/diff.js';
+
+/**
+ * Handles errors by adding an error message to the chat and clearing AI state
+ */
+export const handleError = (
+  shareDBDoc,
+  chatId,
+  error,
+  res,
+) => {
+  console.error('[handleAIChatMessage] error:', error);
+
+  // Clear scratchpad and add error message on error
+  try {
+    const errorResponse = {
+      id: `error-${Date.now()}`,
+      role: 'assistant',
+      content:
+        'Sorry, I encountered an error while processing your message. Please try again.',
+      timestamp: dateToTimestamp(new Date()),
+    };
+
+    const errorOp = diff(shareDBDoc.data, {
+      ...shareDBDoc.data,
+      chats: {
+        ...shareDBDoc.data.chats,
+        [chatId]: {
+          ...shareDBDoc.data.chats[chatId],
+          messages: [
+            ...shareDBDoc.data.chats[chatId].messages,
+            errorResponse,
+          ],
+          aiScratchpad: undefined,
+          aiStatus: undefined,
+          updatedAt: dateToTimestamp(new Date()),
+        },
+      },
+    });
+    shareDBDoc.submitOp(errorOp);
+  } catch (opError) {
+    console.error(
+      '[handleAIChatMessage] error handling error state:',
+      opError,
+    );
+  }
+
+  res.status(500).json({
+    error: 'Internal server error',
+    message: error.message,
+  });
+};

package/src/server/aiChatHandler/index.js

@@ -0,0 +1,69 @@
+import { validateRequest } from './validation.js';
+import {
+  ensureChatsExist,
+  ensureChatExists,
+  addUserMessage,
+  addAIMessage,
+} from './chatOperations.js';
+import { createLLMFunction } from './llmStreaming.js';
+import { performAIEditing } from './aiEditing.js';
+import { handleError } from './errorHandling.js';
+
+const debug = false;
+
+export const handleAIChatMessage =
+  (shareDBDoc) => async (req, res) => {
+    const { content, chatId } = req.body;
+
+    if (debug) {
+      console.log(
+        '[handleAIChatMessage] content:',
+        content,
+        'chatId:',
+        chatId,
+      );
+    }
+
+    // Validate request
+    if (!validateRequest(req, res)) {
+      return;
+    }
+
+    try {
+      // Get existing files from ShareDB doc
+      const files = shareDBDoc.data.files;
+
+      // Ensure chats structure exists
+      ensureChatsExist(shareDBDoc);
+      ensureChatExists(shareDBDoc, chatId);
+
+      // Add user message to chat
+      addUserMessage(shareDBDoc, chatId, content);
+
+      // Create LLM function for streaming
+      const llmFunction = createLLMFunction(
+        shareDBDoc,
+        chatId,
+      );
+
+      // Perform AI editing
+      const editResult = await performAIEditing(
+        shareDBDoc,
+        chatId,
+        content,
+        files,
+        llmFunction,
+      );
+
+      // Add AI response message
+      const aiResponse = addAIMessage(
+        shareDBDoc,
+        chatId,
+        editResult.content,
+      );
+
+      res.status(200).json(aiResponse);
+    } catch (error) {
+      handleError(shareDBDoc, chatId, error, res);
+    }
+  };

package/src/server/aiChatHandler/llmStreaming.js

@@ -0,0 +1,105 @@
+import { StreamingMarkdownParser } from 'llm-code-format';
+import { ChatOpenAI } from '@langchain/openai';
+import {
+  updateAIStatus,
+  updateAIScratchpad,
+} from './chatOperations.js';
+
+const debug = false;
+
+/**
+ * Creates and configures the LLM function for streaming
+ */
+export const createLLMFunction = (shareDBDoc, chatId) => {
+  return async (fullPrompt) => {
+    const chatModel = new ChatOpenAI({
+      modelName:
+        process.env.VIZHUB_EDIT_WITH_AI_MODEL_NAME ||
+        'gpt-4o-mini',
+      configuration: {
+        apiKey: process.env.VIZHUB_EDIT_WITH_AI_API_KEY,
+        baseURL: process.env.VIZHUB_EDIT_WITH_AI_BASE_URL,
+        defaultHeaders: {
+          'HTTP-Referer': 'https://vizhub.com',
+          'X-Title': 'VizHub',
+        },
+      },
+      streaming: true,
+    });
+
+    let fullContent = '';
+    let generationId = '';
+
+    // Track expected state to avoid race conditions
+    let expectedAiScratchpad =
+      shareDBDoc.data.chats[chatId]?.aiScratchpad || '';
+
+    // Throttle updates to avoid "op too long" errors
+    let lastUpdateTime = 0;
+    const UPDATE_THROTTLE_MS = 100;
+
+    // Define callbacks for streaming parser
+    const callbacks = {
+      onFileNameChange: (fileName, format) => {
+        debug &&
+          console.log(
+            `File changed to: ${fileName} (${format})`,
+          );
+        updateAIStatus(
+          shareDBDoc,
+          chatId,
+          'Editing ' + fileName,
+        );
+      },
+      onCodeLine: (line) => {
+        debug && console.log(`Code line: ${line}`);
+      },
+      onNonCodeLine: (line) => {
+        debug && console.log(`Comment/text: ${line}`);
+      },
+    };
+
+    const parser = new StreamingMarkdownParser(callbacks);
+
+    // Stream the response
+    const stream = await chatModel.stream(fullPrompt);
+    for await (const chunk of stream) {
+      if (chunk.content) {
+        const chunkContent = String(chunk.content);
+        fullContent += chunkContent;
+
+        // Throttle updates
+        const now = Date.now();
+        const shouldUpdate =
+          now - lastUpdateTime >= UPDATE_THROTTLE_MS;
+
+        if (shouldUpdate) {
+          updateAIScratchpad(
+            shareDBDoc,
+            chatId,
+            fullContent,
+          );
+          expectedAiScratchpad = fullContent;
+          lastUpdateTime = now;
+        }
+
+        parser.processChunk(chunkContent);
+      }
+
+      if (!generationId && chunk.lc_kwargs?.id) {
+        generationId = chunk.lc_kwargs.id;
+      }
+    }
+    parser.flushRemaining();
+
+    // Submit final update if there's pending content
+    if (expectedAiScratchpad !== fullContent) {
+      updateAIScratchpad(shareDBDoc, chatId, fullContent);
+    }
+
+    return {
+      content: fullContent,
+      generationId: generationId,
+    };
+  };
+};

package/src/server/aiChatHandler/validation.js

@@ -0,0 +1,24 @@
+/**
+ * Validates incoming request data for AI chat messages
+ */
+export const validateRequest = (req, res) => {
+  const { content, chatId } = req.body;
+
+  if (!content || typeof content !== 'string') {
+    res.status(400).json({
+      error:
+        'Invalid request: content is required and must be a string',
+    });
+    return false;
+  }
+
+  if (!chatId || typeof chatId !== 'string') {
+    res.status(400).json({
+      error:
+        'Invalid request: chatId is required and must be a string',
+    });
+    return false;
+  }
+
+  return true;
+};

package/src/server/handleAIChatMessage.js

@@ -0,0 +1,2 @@
+// Re-export the refactored handleAIChatMessage from the new modular structure
+export { handleAIChatMessage } from './aiChatHandler/index.js';