vzcode 1.31.0 → 1.33.0

package/src/client/VZSidebar/AIChat.tsx

@@ -0,0 +1,142 @@
+import {
+  useRef,
+  useEffect,
+  useContext,
+  useState,
+  useCallback,
+} from 'react';
+import { Form, Button } from '../bootstrap';
+import { VZCodeContext } from '../VZCodeContext';
+
+export const AIChat = () => {
+  const [message, setMessage] = useState('');
+  const [messages, setMessages] = useState([
+    {
+      id: 1,
+      type: 'assistant',
+      content:
+        "Hello! I'm your AI assistant. How can I help you with your code today?",
+      timestamp: new Date(),
+    },
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+  const inputRef = useRef(null);
+  const messagesEndRef = useRef(null);
+
+  const { aiChatFocused } = useContext(VZCodeContext);
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  useEffect(() => {
+    // Focus the input when the AI chat is focused
+    if (aiChatFocused && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [aiChatFocused]);
+
+  const handleSendMessage = useCallback(async () => {
+    if (!message.trim() || isLoading) return;
+
+    const userMessage = {
+      id: Date.now(),
+      type: 'user',
+      content: message.trim(),
+      timestamp: new Date(),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setMessage('');
+    setIsLoading(true);
+
+    // Simulate AI response (replace with actual AI integration later)
+    setTimeout(() => {
+      const aiResponse = {
+        id: Date.now() + 1,
+        type: 'assistant',
+        content:
+          'I understand you\'re asking about: "' +
+          userMessage.content +
+          '". This is a placeholder response. The AI chat feature is still being developed!',
+        timestamp: new Date(),
+      };
+      setMessages((prev) => [...prev, aiResponse]);
+      setIsLoading(false);
+    }, 1000);
+  }, [message, isLoading]);
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSendMessage();
+    }
+  };
+
+  return (
+    <div className="ai-chat-container">
+      <div className="ai-chat-messages">
+        {messages.map((msg) => (
+          <div
+            key={msg.id}
+            className={`ai-chat-message ${msg.type === 'user' ? 'user' : 'assistant'}`}
+          >
+            <div className="ai-chat-message-content">
+              {msg.content}
+            </div>
+            <div className="ai-chat-message-time">
+              {msg.timestamp.toLocaleTimeString([], {
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </div>
+          </div>
+        ))}
+        {isLoading && (
+          <div className="ai-chat-message assistant">
+            <div className="ai-chat-message-content">
+              <div className="ai-chat-typing">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          </div>
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      <div className="ai-chat-input-container">
+        <Form.Group className="ai-chat-input-group">
+          <Form.Control
+            as="textarea"
+            rows={2}
+            value={message}
+            onChange={(event) =>
+              setMessage(event.target.value)
+            }
+            onKeyDown={handleKeyDown}
+            ref={inputRef}
+            placeholder="Ask me anything about your code..."
+            spellCheck="false"
+            disabled={isLoading}
+          />
+          <Button
+            variant="primary"
+            onClick={handleSendMessage}
+            disabled={!message.trim() || isLoading}
+            className="ai-chat-send-button"
+          >
+            Send
+          </Button>
+        </Form.Group>
+      </div>
+    </div>
+  );
+};

package/src/client/VZSidebar/Search.tsx

@@ -64,6 +64,7 @@ export const Search = () => {
     setSearchFocusedIndex,
     shareDBDoc,
     editorCache,
+    openTab,
   } = useContext(VZCodeContext);
   const {
     pattern,
@@ -227,6 +228,9 @@ export const Search = () => {
       case 'Enter':
       case ' ':
         const fileId: VizFileId = files[focusedIndex][0];
+
+        openTab({ fileId, isTransient: true });
+
         setActiveFileId(fileId);
 
         if (focusedChildIndex !== null) {
@@ -441,6 +445,13 @@ export const Search = () => {
                                     childIndex,
                                   );
 
+                                  openTab({
+                                    fileId,
+                                    isTransient: true,
+                                  });
+
+                                  setActiveFileId(fileId);
+
                                   const cacheKey =
                                     editorCacheKey(
                                       fileId,

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</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,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/useESLint/index.ts

@@ -0,0 +1,72 @@
+import { useState, useEffect, useCallback } from 'react';
+import { EditorView } from '@codemirror/view';
+import { Diagnostic } from '@codemirror/lint';
+// @ts-ignore - Worker import
+import ESLintWorker from './worker?worker';
+import { enableESLint } from '../../server/featureFlags';
+import { fileNameStateField } from '../CodeEditor/getOrCreateEditor';
+
+let requestCounter = 0;
+const pendingRequests = new Map();
+
+export const useESLint = () => {
+  const [worker, setWorker] = useState(null);
+
+  // Initialize the work in an effect so it does not run during SSR.
+  useEffect(() => {
+    setWorker(new ESLintWorker());
+  }, []);
+
+  useEffect(() => {
+    // Wait for the worker to be initialized
+    if (!worker) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      const { diagnostics, requestId, error } = event.data;
+
+      if (error) {
+        console.error('[ESLint] Error:', error);
+      }
+
+      const resolve = pendingRequests.get(requestId);
+      if (resolve) {
+        resolve(diagnostics);
+        pendingRequests.delete(requestId);
+      }
+    };
+
+    worker.addEventListener('message', handleMessage);
+
+    return () => {
+      worker.removeEventListener('message', handleMessage);
+      worker.terminate();
+    };
+  }, [worker]);
+
+  const esLintSource = useCallback(
+    async (
+      view: EditorView,
+    ): Promise<readonly Diagnostic[]> => {
+      if (!enableESLint) return [];
+
+      // Retrieve the file name from the editor's state
+      const fileName = view.state.field(fileNameStateField);
+
+      try {
+        const code = view.state.doc.toString();
+        const requestId = requestCounter++;
+
+        return new Promise<Diagnostic[]>((resolve) => {
+          pendingRequests.set(requestId, resolve);
+          worker.postMessage({ code, requestId, fileName });
+        });
+      } catch (e) {
+        console.error('[ESLint] Error in linter:', e);
+        return [];
+      }
+    },
+    [worker],
+  );
+
+  return { esLintSource };
+};