vzcode 1.32.0 → 1.34.0

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

@@ -0,0 +1,256 @@
+.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: white;
+      margin-right: 20px;
+      border-radius: 12px 12px 12px 4px;
+    }
+
+    .ai-chat-message-time {
+      text-align: left;
+      margin-left: 5px;
+    }
+
+    &.streaming {
+      .ai-chat-message-content {
+        background: var(--vh-color-neutral-02);
+        color: white;
+        border-radius: 12px 12px 12px 4px;
+      }
+    }
+  }
+}
+
+.ai-chat-message-content {
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 1.4;
+  word-wrap: break-word;
+
+  // Markdown styling for dark backgrounds
+  pre {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: #e6e6e6;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    font-size: 0.875rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  code {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: #e6e6e6;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  pre code {
+    background-color: transparent;
+    padding: 0;
+    border: none;
+  }
+
+  blockquote {
+    border-left: 3px solid var(--vh-color-neutral-03);
+    padding-left: 1rem;
+    margin: 0.5rem 0;
+    color: var(--vh-color-neutral-03);
+    font-style: italic;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    color: inherit;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.5rem;
+  }
+
+  p {
+    margin-bottom: 0.5rem;
+  }
+
+  // Ensure good contrast for assistant messages
+  .ai-chat-message.assistant & {
+    color: white;
+  }
+
+  // Ensure user message text stays white
+  .ai-chat-message.user & {
+    color: white;
+  }
+}
+
+.ai-chat-message-time {
+  font-size: 11px;
+  color: var(--vh-color-neutral-03);
+  margin-top: 4px;
+}
+
+.ai-chat-status {
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--vh-color-neutral-03);
+  margin-bottom: 0.5rem;
+  margin-left: 20px;
+  margin-right: 20px;
+  padding: 0.25rem 0.5rem;
+  background-color: var(--vh-color-neutral-02);
+  border-radius: 0.25rem;
+  border: 1px solid var(--vh-color-neutral-03);
+  text-align: left;
+}
+
+.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;
+    }
+  }
+}
+
+@keyframes typing {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.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) !important;
+    border: 1px solid var(--vh-color-neutral-03) !important;
+    color: var(--vh-color-neutral-04) !important;
+    border-radius: 8px;
+    padding: 8px 10px;
+    font-size: 14px;
+    font-family: var(--vzcode-font-family);
+    resize: none;
+    min-height: 36px;
+
+    &:focus {
+      outline: none !important;
+      border-color: var(--vh-color-primary-01) !important;
+      box-shadow: 0 0 0 2px rgba(38, 67, 153, 0.2) !important;
+      color: var(--vh-color-neutral-04) !important;
+    }
+
+    &::placeholder {
+      color: var(--vh-color-neutral-03) !important;
+    }
+
+    &: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;
+    }
+  }
+}

package/src/client/VZSidebar/index.tsx

@@ -25,15 +25,20 @@ import {
   PinSVG,
   QuestionMarkSVG,
   SearchSVG,
+  SparklesSVG,
 } from '../Icons';
 import { MicSVG } from '../Icons/MicSVG';
 import { sortFileTree } from '../sortFileTree';
 import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { VZCodeContext } from '../VZCodeContext';
+import { AIChat } from './AIChat';
 import { Listing } from './Listing';
 import { Search } from './Search';
 import { useDragAndDrop } from './useDragAndDrop';
-import { enableLiveKit } from '../featureFlags';
+import {
+  enableLiveKit,
+  enableAIChat,
+} from '../featureFlags';
 import './styles.scss';
 
 // TODO turn this UI back on when we are actually detecting
@@ -105,6 +110,11 @@ export const VZSidebar = ({
       <strong>Open Voice Chat Menu</strong>
     </div>
   ),
+  aiChatToolTipText = (
+    <div>
+      <strong>AI Chat (beta)</strong>
+    </div>
+  ),
 }: {
   createFileTooltipText?: React.ReactNode;
   createDirTooltipText?: React.ReactNode;
@@ -116,6 +126,7 @@ export const VZSidebar = ({
   enableAutoFollowTooltipText?: React.ReactNode;
   disableAutoFollowTooltipText?: React.ReactNode;
   voiceChatToolTipText?: React.ReactNode;
+  aiChatToolTipText?: React.ReactNode;
 }) => {
   const {
     files,
@@ -124,6 +135,8 @@ export const VZSidebar = ({
     setIsDocOpen,
     isSearchOpen,
     setIsSearchOpen,
+    isAIChatOpen,
+    setIsAIChatOpen,
     handleOpenCreateFileModal,
     handleOpenCreateDirModal,
     connected,
@@ -270,7 +283,10 @@ export const VZSidebar = ({
             <i
               id="files-icon"
               className="icon-button icon-button-dark"
-              onClick={() => setIsSearchOpen(false)}
+              onClick={() => {
+                setIsSearchOpen(false);
+                setIsAIChatOpen(false);
+              }}
             >
               <FolderSVG />
             </i>
@@ -287,12 +303,37 @@ export const VZSidebar = ({
             <i
               id="search-icon"
               className="icon-button icon-button-dark"
-              onClick={() => setIsSearchOpen(true)}
+              onClick={() => {
+                setIsSearchOpen(true);
+                setIsAIChatOpen(false);
+              }}
             >
               <SearchSVG />
             </i>
           </OverlayTrigger>
 
+          {enableAIChat && (
+            <OverlayTrigger
+              placement="right"
+              overlay={
+                <Tooltip id="ai-chat-tooltip">
+                  {aiChatToolTipText}
+                </Tooltip>
+              }
+            >
+              <i
+                id="ai-chat-icon"
+                className="icon-button icon-button-dark"
+                onClick={() => {
+                  setIsAIChatOpen(true);
+                  setIsSearchOpen(false);
+                }}
+              >
+                <SparklesSVG />
+              </i>
+            </OverlayTrigger>
+          )}
+
           <OverlayTrigger
             placement="right"
             overlay={
@@ -438,7 +479,15 @@ export const VZSidebar = ({
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
         >
-          {!isSearchOpen ? (
+          {isAIChatOpen ? (
+            <div className="sidebar-ai-chat">
+              <AIChat />
+            </div>
+          ) : isSearchOpen ? (
+            <div className="sidebar-search">
+              <Search />
+            </div>
+          ) : (
             <div className="sidebar-files">
               {isDragOver ? (
                 <div className="empty drag-over">
@@ -480,10 +529,6 @@ export const VZSidebar = ({
                 </div>
               )}
             </div>
-          ) : (
-            <div className="sidebar-search">
-              <Search />
-            </div>
           )}
         </div>
       </div>

package/src/client/VZSidebar/styles.scss

@@ -66,7 +66,8 @@
   }
 
   .sidebar-files,
-  .sidebar-search {
+  .sidebar-search,
+  .sidebar-ai-chat {
     width: 100%;
   }
 
@@ -76,6 +77,12 @@
     }
   }
 
+  .sidebar-ai-chat {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
   .sidebar-search .arrow-wrapper {
     cursor: pointer;
   }

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,2 +1,4 @@
 export const enableLiveKit =
   import.meta.env.VITE_ENABLE_LIVEKIT === 'true';
+
+export const enableAIChat = true;

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,