vzcode 1.32.0 → 1.33.0

package/src/client/VZSidebar/styles.scss

@@ -66,7 +66,8 @@
   }
 
   .sidebar-files,
-  .sidebar-search {
+  .sidebar-search,
+  .sidebar-ai-chat {
     width: 100%;
   }
 
@@ -76,6 +77,182 @@
     }
   }
 
+  .sidebar-ai-chat {
+    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 {
     cursor: pointer;
   }

package/src/client/featureFlags.ts

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

package/src/client/useActions.ts

@@ -150,6 +150,24 @@ export const useActions = (
     });
   }, [dispatch]);
 
+  // True to show the AI chat instead of files
+  const setIsAIChatOpen = useCallback(
+    (value: boolean) => {
+      dispatch({
+        type: 'set_is_ai_chat_open',
+        value: value,
+      });
+    },
+    [dispatch],
+  );
+
+  // Toggle the focused variable, which should focus the AI chat input
+  const toggleAIChatFocused = useCallback(() => {
+    dispatch({
+      type: 'toggle_ai_chat_focused',
+    });
+  }, [dispatch]);
+
   // True to show the settings modal.
   const setIsSettingsOpen = useCallback(
     (value: boolean) => {
@@ -231,6 +249,8 @@ export const useActions = (
     setSearchLineVisibility,
     setSearchFocusedIndex,
     toggleSearchFocused,
+    setIsAIChatOpen,
+    toggleAIChatFocused,
     setIsSettingsOpen,
     setIsDocOpen,
     closeSettings,

package/src/client/useEditorCache.ts

@@ -6,6 +6,7 @@ import { EditorView } from 'codemirror';
 export type EditorCacheValue = {
   editor: EditorView;
   themeCompartment: any;
+  languageCompartment?: any;
   scrollPosition?: number;
 };
 

package/src/client/useFileCRUD.ts

@@ -2,6 +2,10 @@ import { useCallback } from 'react';
 import { FileTreePath } from '../types';
 import { VizFileId, VizContent } from '@vizhub/viz-types';
 import { randomId } from '../randomId';
+import { EditorCache } from './useEditorCache';
+import { getFileExtension } from './utils/fileExtension';
+import { getLanguageExtension } from './CodeEditor/getOrCreateEditor';
+import { editorCacheKey } from './useEditorCache';
 
 // CRUD operations for files and directories
 // CRUD = Create, Read, Update, Delete
@@ -9,6 +13,8 @@ export const useFileCRUD = ({
   submitOperation,
   closeTabs,
   openTab,
+  editorCache,
+  content,
 }: {
   submitOperation: (
     operation: (document: VizContent) => VizContent,
@@ -21,6 +27,8 @@ export const useFileCRUD = ({
     fileId: VizFileId;
     isTransient: boolean;
   }) => void;
+  editorCache: EditorCache;
+  content: VizContent;
 }) => {
   // Create a new file
   const createFile = useCallback(
@@ -78,6 +86,45 @@ export const useFileCRUD = ({
           },
         },
       }));
+
+      const oldName = content.files[fileId].name;
+      const oldExtension = getFileExtension(oldName);
+
+      const newExtension = getFileExtension(newName);
+
+      const didExtensionChange =
+        newExtension !== oldExtension;
+      if (didExtensionChange) {
+        // Update the language compartment of the corresponding CodeMirror editor
+        // with the new language, based on the new extension, only if it changed.
+        // Search through all cached editors for this file ID
+        for (const [
+          cacheKey,
+          cachedEditor,
+        ] of editorCache.entries()) {
+          // Check if this cache entry is for the current file
+          if (cacheKey.startsWith(fileId + '|')) {
+            if (
+              cachedEditor &&
+              cachedEditor.languageCompartment
+            ) {
+              const newLanguageExtension =
+                getLanguageExtension(newExtension);
+
+              // Reconfigure the language compartment with the new language extension
+              cachedEditor.editor.dispatch({
+                effects:
+                  cachedEditor.languageCompartment.reconfigure(
+                    newLanguageExtension
+                      ? [newLanguageExtension]
+                      : [],
+                  ),
+              });
+              // Continue to update all instances of this file in different panes
+            }
+          }
+        }
+      }
     },
     [submitOperation],
   );

package/src/client/useOpenDirectories.ts

@@ -1,26 +1,36 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import type { Pane } from '../types';
+import { VizContent } from '@vizhub/viz-types';
 
 // TODO bring this feature back
 // When a page is opened with an active file,
 // make sure all the directories leading to that file
 // are opened automatically.
-//export const initialOpenDirectories = (activeFile) => {
-//  const openDirectories = {};
-//  if (activeFile) {
-//    const path = activeFile.split('/');
-//    for (let i = 1; i < path.length; i++) {
-//      openDirectories[path.slice(0, i).join('/')] = true;
-//    }
-//  }
-//  return openDirectories;
-//};
+export const initialOpenDirectories = (
+  activeFile: string | null,
+): Set<VZPath> => {
+  const openDirectories = new Set<VZPath>();
+  if (activeFile) {
+    const path = activeFile.split('/');
+    for (let i = 1; i < path.length; i++) {
+      openDirectories.add(path.slice(0, i).join('/'));
+    }
+  }
+  return openDirectories;
+};
 
 type VZPath = string;
 
 // Inspired by
 // https://github.com/vizhub-core/vizhub/blob/main/vizhub-v2/packages/neoFrontend/src/pages/VizPage/Body/Editor/FilesSection/useOpenDirectories.js
 // TODO move this into reducer
-export const useOpenDirectories = (): {
+export const useOpenDirectories = ({
+  activePane,
+  content,
+}: {
+  activePane: Pane;
+  content: VizContent;
+}): {
   isDirectoryOpen: (path: VZPath) => boolean;
   toggleDirectory: (path: VZPath) => void;
 } => {
@@ -29,6 +39,27 @@ export const useOpenDirectories = (): {
     Set<VZPath>
   >(new Set());
 
+  // (client-side only) initialize the open directories
+  // based on the open files from the URL params.
+  useEffect(() => {
+    if (
+      activePane.type === 'leafPane' &&
+      activePane?.activeFileId &&
+      content.files[activePane.activeFileId]
+    ) {
+      const activeFileId = activePane.activeFileId;
+      const fileName = content.files[activeFileId].name;
+      const dirsToOpen = initialOpenDirectories(fileName);
+      setOpenDirectories((prev) => {
+        const updated = new Set(prev);
+        for (const dir of dirsToOpen) {
+          updated.add(dir);
+        }
+        return updated;
+      });
+    }
+  }, [activePane]);
+
   // Whether a directory is open.
   const isDirectoryOpen: (path: VZPath) => boolean =
     useCallback(

package/src/client/utils/fileExtension.ts

@@ -0,0 +1,10 @@
+/**
+ * Utility function to extract file extension from a file name.
+ * @param fileName - The name of the file (e.g., "index.html", "script.js")
+ * @returns The file extension without the dot (e.g., "html", "js") or undefined if no extension
+ */
+export const getFileExtension = (
+  fileName: string,
+): string | undefined => {
+  return fileName.split('.').pop();
+};

package/src/client/vzReducer/aiChatReducer.ts

@@ -0,0 +1,31 @@
+import { VZState, VZAction } from '.';
+
+export const setIsAIChatOpenReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'set_is_ai_chat_open') {
+    return {
+      ...state,
+      isAIChatOpen: action.value,
+      // When opening AI chat, close search
+      isSearchOpen: action.value
+        ? false
+        : state.isSearchOpen,
+    };
+  }
+  return state;
+};
+
+export const toggleAIChatFocusedReducer = (
+  state: VZState,
+  action: VZAction,
+): VZState => {
+  if (action.type === 'toggle_ai_chat_focused') {
+    return {
+      ...state,
+      aiChatFocused: !state.aiChatFocused,
+    };
+  }
+  return state;
+};

package/src/client/vzReducer/createInitialState.ts

@@ -25,6 +25,8 @@ export const createInitialState = ({
     focusedChildIndex: null,
   },
   isSearchOpen: false,
+  isAIChatOpen: false,
+  aiChatFocused: false,
   isSettingsOpen: false,
   isDocOpen: false,
   editorWantsFocus: false,

package/src/client/vzReducer/index.ts

@@ -30,6 +30,10 @@ import {
   setSearchFocusedIndexReducer,
   toggleSearchFocusedReducer,
 } from './searchReducer';
+import {
+  setIsAIChatOpenReducer,
+  toggleAIChatFocusedReducer,
+} from './aiChatReducer';
 import { toggleAutoFollowReducer } from './toggleAutoFollowReducer';
 import { updatePresenceIndicatorReducer } from './updatePresenceIndicatorReducer';
 import { splitCurrentPaneReducer } from './splitCurrentPaneReducer';
@@ -52,6 +56,12 @@ export type VZState = {
   // True to show the search instead of files
   isSearchOpen: boolean;
 
+  // True to show the AI chat instead of files
+  isAIChatOpen: boolean;
+
+  // True if the AI chat input should focus on the next render.
+  aiChatFocused: boolean;
+
   // True to show the settings modal.
   isSettingsOpen: boolean;
 
@@ -115,6 +125,14 @@ export type VZAction =
   //  * Sets whether the search tab is open.
   | { type: 'set_is_search_open'; value: boolean }
 
+  // `set_is_ai_chat_open`
+  //  * Sets whether the AI chat tab is open.
+  | { type: 'set_is_ai_chat_open'; value: boolean }
+
+  // `toggle_ai_chat_focused`
+  // * Toggles focused variable to trigger AI chat input focus
+  | { type: 'toggle_ai_chat_focused' }
+
   // `set_search`
   //  * Sets the current search pattern
   | { type: 'set_search'; value: string }
@@ -192,6 +210,8 @@ const reducers = [
   setSearchFocusedIndexReducer,
   toggleSearchFocusedReducer,
   setIsSearchOpenReducer,
+  setIsAIChatOpenReducer,
+  toggleAIChatFocusedReducer,
   setIsSettingsOpenReducer,
   setIsDocOpenReducer,
   editorNoLongerWantsFocusReducer,