vzcode 1.16.0 → 1.18.0

package/src/client/VZSettings.tsx

@@ -9,8 +9,9 @@ import { Button, Modal, Form } from './bootstrap';
 import { ThemeLabel, themes } from './themes';
 import { VZCodeContext } from './VZCodeContext';
 import { fonts } from './Fonts/fonts';
+import { toggleRainbowBrackets } from './CodeEditor/rainbowBrackets';
 
-const fontSizes = ['16px', '18px', '20px', '24px'];
+const fontSizes = ['10px','12px','14px','16px', '18px', '20px', '24px'];
 
 export const VZSettings = ({
   enableUsernameField = true,
@@ -29,11 +30,21 @@ export const VZSettings = ({
 
   const handleThemeChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
-      setTheme(event.target.value as ThemeLabel);
+      const selectedTheme = event.target.value as ThemeLabel;
+      setTheme(selectedTheme);
+      localStorage.setItem('vzcodeSelectedTheme', selectedTheme);
     },
     [],
   );
-
+  
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('vzcodeSelectedTheme') as ThemeLabel | null;
+    if (savedTheme) {
+      setTheme(savedTheme);
+    } else {
+      setTheme('vizhub');
+    }
+  }, [setTheme]);
   // Initialize font and size from localStorage or defaults
   // const [selectedFont, setSelectedFont] = useState(
   //   localStorage.getItem('vzcodeSelectedFont') ||
@@ -48,6 +59,10 @@ export const VZSettings = ({
   const [selectedFontSize, setSelectedFontSize] =
     useState('16px');
 
+  // Initialize rainbowBrackets setting from localStorage or default to 'on'
+  const [rainbowBrackets, setRainbowBrackets] =
+    useState('on');
+
   useEffect(() => {
     // If we're in the browser,
     if (typeof window !== 'undefined') {
@@ -60,6 +75,12 @@ export const VZSettings = ({
         'vzcodeSelectedFontSize',
       );
 
+      const rainbowBracketsFromLocalStorage:
+        | string
+        | null = window.localStorage.getItem(
+        'vzcodeRainbowBrackets',
+      );
+
       if (selectedFontFromLocalStorage !== null) {
         setSelectedFont(selectedFontFromLocalStorage);
       }
@@ -68,6 +89,9 @@ export const VZSettings = ({
           selectedFontSizeFromLocalStorage,
         );
       }
+      if (rainbowBracketsFromLocalStorage !== null) {
+        setRainbowBrackets(rainbowBracketsFromLocalStorage);
+      }
     } else {
       // If we're not in the browser, use the default initial width.
     }
@@ -96,6 +120,17 @@ export const VZSettings = ({
     [],
   );
 
+  // Called when the user changes the Rainbow Brackets setting
+  const handleRainbowBracketsChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const newSetting = event.target.value;
+      localStorage.setItem('vzcodeRainbowBrackets', newSetting);
+      setRainbowBrackets(newSetting);
+      toggleRainbowBrackets(newSetting === 'on');
+    },
+    [],
+  );
+
   useEffect(() => {
     document.body.style.setProperty(
       '--vzcode-font-family',
@@ -220,6 +255,22 @@ export const VZSettings = ({
             Select a font size for the editor
           </Form.Text>
         </Form.Group>
+        
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Rainbow Brackets</Form.Label>
+          <select
+            className="form-select"
+            onChange={handleRainbowBracketsChange}
+            value={rainbowBrackets}
+          >
+            <option value="on">On</option>
+            <option value="off">Off</option>
+          </select>
+          <Form.Text className="text-muted">
+            Toggle Rainbow Brackets
+          </Form.Text>
+        </Form.Group>
+
       </Modal.Body>
       <Modal.Footer>
         <Button variant="primary" onClick={closeSettings}>

package/src/client/VZSidebar/VoiceChatModal.tsx

@@ -0,0 +1,121 @@
+import {
+  ParticipantLoop,
+  ParticipantName,
+  useParticipants,
+  useRoomContext,
+} from '@livekit/components-react';
+import { useContext, useState } from 'react';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { v4 } from 'uuid';
+import { VZCodeContext } from '../VZCodeContext';
+
+export function VoiceChatModal() {
+  const {
+    liveKitRoomName,
+    setLiveKitRoom,
+    liveKitToken,
+    setLiveKitToken,
+    liveKitConnection,
+    setLiveKitConnection,
+    voiceChatModalOpen,
+    setVoiceChatModalOpen,
+  } = useContext(VZCodeContext);
+  const participants = useParticipants();
+
+  const [roomName, setRoomName] = useState(
+    liveKitRoomName || '',
+  );
+  const [username, setUsername] = useState('');
+  const room = useRoomContext();
+
+  const handleConnect = () => {
+    if (liveKitConnection) {
+      setLiveKitConnection(false);
+      setLiveKitRoom(`${v4()}`);
+      setLiveKitToken('');
+      room.disconnect(true);
+      return;
+    }
+    setLiveKitRoom(roomName);
+    const fetchToken = async () => {
+      try {
+        const res = await fetch(
+          `/livekit-token?room=${roomName}&username=${username}`,
+          {
+            method: 'GET',
+          },
+        );
+        const tokenResponse = await res.text();
+        setLiveKitToken(tokenResponse);
+        setLiveKitConnection(true);
+      } catch (error) {
+        console.error('Error fetching token:', error);
+      }
+    };
+
+    fetchToken();
+  };
+
+  const handleClose = () => {
+    setVoiceChatModalOpen(false);
+  };
+
+  return (
+    <Modal
+      className="vz-settings"
+      show={voiceChatModalOpen}
+      onHide={handleClose}
+      animation={false}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Connect to LiveKit Room</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form>
+          <Form.Group controlId="formRoomName">
+            <Form.Label>Room Name</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter room name"
+              value={roomName}
+              onChange={(e) => setRoomName(e.target.value)}
+            />
+          </Form.Group>
+        </Form>
+        <Form>
+          <Form.Group controlId="formUserName">
+            <Form.Label>Username</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="Enter Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </Form.Group>
+        </Form>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <b>Users in Room: </b>
+          <ParticipantLoop participants={participants}>
+            <ParticipantName />
+          </ParticipantLoop>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          variant={liveKitConnection ? 'danger' : 'primary'}
+          onClick={handleConnect}
+        >
+          {liveKitConnection ? 'Disconnect' : 'Connect'}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}

package/src/client/VZSidebar/index.tsx

@@ -4,6 +4,7 @@ import {
   useEffect,
   useMemo,
   useState,
+  useRef,
 } from 'react';
 import {
   FileId,
@@ -13,25 +14,27 @@ import {
   PresenceId,
   PresenceIndicator,
 } from '../../types';
-import { Tooltip, OverlayTrigger } from '../bootstrap';
-import { Search } from './Search';
+import { OverlayTrigger, Tooltip } from '../bootstrap';
 import { getFileTree } from '../getFileTree';
-import { sortFileTree } from '../sortFileTree';
-import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import {
-  FolderSVG,
-  SearchSVG,
   BugSVG,
+  FileSVG,
+  FolderSVG,
   GearSVG,
   NewSVG,
-  FileSVG,
-  QuestionMarkSVG,
   PinSVG,
+  QuestionMarkSVG,
+  SearchSVG,
 } from '../Icons';
+import { MicSVG } from '../Icons/MicSVG';
+import { sortFileTree } from '../sortFileTree';
+import { SplitPaneResizeContext } from '../SplitPaneResizeContext';
 import { VZCodeContext } from '../VZCodeContext';
 import { Listing } from './Listing';
-import { useDragAndDrop } from './useDragAndDrop';
+import { Search } from './Search';
 import './styles.scss';
+import { useDragAndDrop } from './useDragAndDrop';
+import { enableLiveKit } from '../featureFlags';
 
 // TODO turn this UI back on when we are actually detecting
 // the connection status.
@@ -97,6 +100,11 @@ export const VZSidebar = ({
       <div>(Ctrl + Shift + A)</div>
     </div>
   ),
+  voiceChatToolTipText = (
+    <div>
+      <strong>Open Voice Chat Menu</strong>
+    </div>
+  ),
 }: {
   createFileTooltipText?: React.ReactNode;
   createDirTooltipText?: React.ReactNode;
@@ -107,6 +115,7 @@ export const VZSidebar = ({
   filesToolTipText?: React.ReactNode;
   enableAutoFollowTooltipText?: React.ReactNode;
   disableAutoFollowTooltipText?: React.ReactNode;
+  voiceChatToolTipText?: React.ReactNode;
 }) => {
   const {
     files,
@@ -118,12 +127,16 @@ export const VZSidebar = ({
     handleOpenCreateFileModal,
     handleOpenCreateDirModal,
     connected,
+    pending,
     sidebarRef,
     enableAutoFollow,
     toggleAutoFollow,
     docPresence,
     updatePresenceIndicator,
     sidebarPresenceIndicators,
+    liveKitConnection,
+    setLiveKitConnection,
+    setVoiceChatModalOpen,
   } = useContext(VZCodeContext);
 
   const fileTree = useMemo(
@@ -205,7 +218,35 @@ export const VZSidebar = ({
     }
   }, [docPresence]);
 
-  // console.log(sidebarPresenceIndicators);
+  const [saved, setSaved] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(true);
+  const previousPendingRef = useRef<boolean>(pending);
+
+  // Handle connection status transitions
+  useEffect(() => {
+    if (isConnecting && connected) {
+      setIsConnecting(false);
+    }
+  }, [connected, isConnecting]);
+
+  // Handle 'saved' state based on 'pending' transition
+  useEffect(() => {
+    // Check if 'pending' transitioned from true to false
+    if (
+      previousPendingRef.current &&
+      !pending &&
+      connected &&
+      !isConnecting
+    ) {
+      setSaved(true);
+      const timer = setTimeout(() => {
+        setSaved(false);
+      }, 1500); // Reset after 2 seconds
+      return () => clearTimeout(timer);
+    }
+    // Update the ref with the current 'pending' state
+    previousPendingRef.current = pending;
+  }, [pending, connected, isConnecting]);
 
   return (
     <div
@@ -367,11 +408,36 @@ export const VZSidebar = ({
               }`}
               onClick={toggleAutoFollow}
             >
+              <i></i>
               <PinSVG />
             </i>
           </OverlayTrigger>
+          {/* Start Voice Chat */}
+          {enableLiveKit && (
+            <OverlayTrigger
+              placement="right"
+              overlay={
+                <Tooltip id="voice-chat">
+                  {voiceChatToolTipText}
+                </Tooltip>
+              }
+            >
+              <i
+                id="mic-icon"
+                className="icon-button icon-button-dark"
+                onClick={() => {
+                  console.log(
+                    'clicking',
+                    liveKitConnection,
+                  );
+                  setVoiceChatModalOpen(true);
+                }}
+              >
+                <MicSVG />
+              </i>
+            </OverlayTrigger>
+          )}
         </div>
-
         <div className="files" id="sidebar-view-container">
           {!isSearchOpen ? (
             <div className="sidebar-files">
@@ -414,14 +480,27 @@ export const VZSidebar = ({
           )}
         </div>
       </div>
-
       {enableConnectionStatus && (
         <div className="connection-status">
-          {connected ? 'Connected' : 'Connection Lost'}
+          {isConnecting
+            ? 'Connecting...'
+            : !connected
+              ? 'Connection Lost'
+              : pending
+                ? 'Saving...'
+                : saved
+                  ? 'Saved.'
+                  : 'Connected'}
           <div className="connection">
             <div
               className={`connection-status-indicator ${
-                connected ? 'connected' : 'disconnected'
+                isConnecting
+                  ? 'pending'
+                  : !connected
+                    ? 'disconnected'
+                    : pending
+                      ? 'pending'
+                      : 'connected'
               }`}
             />
           </div>

package/src/client/VZSidebar/styles.scss

@@ -261,6 +261,10 @@
         background-color: var(--vh-color-success-01);
       }
 
+      &.pending {
+        background-color: var(--vh-color-caution-01);
+      }
+
       &.disconnected {
         background-color: var(--vh-color-warning-01);
       }
@@ -290,6 +294,7 @@
     align-items: center;
     justify-content: center;
     font-size: 8px;
-    color: #ffffff;
+    color: #000000;
+    z-index: 1;
   }
 }

package/src/client/featureFlags.ts

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

package/src/client/useTypeScript/worker/constants.ts

@@ -69,9 +69,13 @@ const LINT_ERROR_CODE_OBJ_REASSINGMENT = 2739;
 // Type 'any' is not assignable to type 'never'.
 const LINT_ERROR_CODE_ANY_NOT_ASSIGNABLE_TO_NEVER = 2322;
 
+// Ignore potential undefined error for variables
+const LINT_ERROR_CODE_POSSIBLY_UNDEFINED = 18048;
+
 // This code is for errors like:
 // "Object is of type 'unknown'."
 const LINT_ERROR_CODE_UNKNOWN = 18046;
+const LINT_ERROR_CODE_UNKNOWN_SYMBOL_ITERATOR = 2488;
 
 export const excludedErrorCodes = new Set([
   LINT_ERROR_CODE_ANY,
@@ -85,4 +89,6 @@ export const excludedErrorCodes = new Set([
   LINT_ERROR_CODE_OBJ_REASSINGMENT,
   LINT_ERROR_CODE_ANY_NOT_ASSIGNABLE_TO_NEVER,
   LINT_ERROR_CODE_UNKNOWN,
+  LINT_ERROR_CODE_UNKNOWN_SYMBOL_ITERATOR,
+  LINT_ERROR_CODE_POSSIBLY_UNDEFINED,
 ]);

package/src/server/generateAIResponse.js

@@ -1,24 +1,76 @@
 import OpenAI from 'openai';
 import { json1Presence } from '../ot.js';
 
+// This module implements the generation of the AI response,
+// using the OpenAI client.
+
+// These environment variables are used to configure the OpenAI client.
+// See `.env.sample` for the expected values.
+const { VZCODE_AI_API_KEY, VZCODE_AI_BASE_URL } =
+  process.env;
+
+// If neither of these are not set, the OpenAI client will not be initialized,
+// e.g. for local development where no AI is needed.
+const isAIEnabled =
+  VZCODE_AI_API_KEY !== undefined &&
+  VZCODE_AI_BASE_URL !== undefined;
+
 const { editOp, type } = json1Presence;
 
+// Debug flag to log more information during development.
 const debug = false;
 
-// Feature flag to slow down AI for development/testing
+// Feature flag to slow down AI for development/testing.
+// Particularly relevant for debugging ShareDB and CodeMirror sync issues.
+// This allows you to test the case of editing the document at the
+// same time as the AI generation is happening.
 const slowdown = false;
 
-let openai;
-if (process.env.OPENAI_API_KEY !== undefined) {
-  openai = new OpenAI();
+// The options passed into the OpenAI client
+// new OpenAI(openAIOptions)
+const openAIOptions = {};
+
+// Support specifying the API key via an environment variable
+// If VZCODE_AI_API_KEY is not set, note that the OpenAI client
+// will look for the OPENAI_API_KEY environment variable instead.
+if (process.env.VZCODE_AI_API_KEY !== undefined) {
+  openAIOptions.apiKey = process.env.VZCODE_AI_API_KEY;
 }
 
-const AISourceName = 'AIAssist';
+// Support for local AI server
+if (process.env.VZCODE_AI_BASE_URL !== undefined) {
+  // The OpenAI client errors if the API key is not set,
+  // so in the case where we don't need an API key,
+  // e.g. for testing with a local AI server like LM Studio or LocalAI,
+  // we populate the option with a fake API key, so it doesn't error.
+  if (!openAIOptions.apiKey) {
+    openAIOptions.apiKey = 'Fake API Key';
+  }
 
-function opComesFromAIAssist(ops, source) {
-  return source === AISourceName;
+  openAIOptions.baseURL = process.env.VZCODE_AI_BASE_URL;
 }
 
+debug &&
+  console.log(
+    'openAIOptions: ' +
+      JSON.stringify(openAIOptions, null, 2),
+  );
+let openai;
+
+if (isAIEnabled) {
+  openai = new OpenAI(openAIOptions);
+}
+
+// The name of the source that the AI responses
+// will be attributed to in ShareDB operations.
+const AIShareDBSourceName = 'AIAssist';
+
+// Returns trie if the operation comes from AI.
+const opComesFromAIAssist = (ops, source) =>
+  source === AIShareDBSourceName;
+
+// Keeps track of the currently ongoing AI streams.
+// There could be many streams at the same time.
 const streams = {};
 
 export const generateAIResponse = async ({
@@ -28,6 +80,16 @@ export const generateAIResponse = async ({
   streamId,
   shareDBDoc,
 }) => {
+  if (!isAIEnabled) {
+    console.log(
+      '[generateAIResponse] AI is not enabled. Skipping AI generation.',
+    );
+    console.log(
+      '[generateAIResponse] To enable AI, see .env.sample for the required environment variables.',
+    );
+    return;
+  }
+
   if (debug) {
     console.log(
       '[generateAIResponse] inputText:',
@@ -44,7 +106,10 @@ export const generateAIResponse = async ({
       shareDBDoc,
     );
   }
-  function accomodateDocChanges(op, source) {
+
+  // Handle the case that a user edits the text in the document
+  // that comes becofore the insertion cursor.
+  const accomodateDocChanges = (op, source) => {
     if (!opComesFromAIAssist(op, source)) {
       if (op !== null) {
         insertionCursor = type
@@ -55,10 +120,10 @@ export const generateAIResponse = async ({
           .slice(-1)[0];
       }
     }
-  }
-
+  };
   shareDBDoc.on('op', accomodateDocChanges);
 
+  // The prompt!
   const messages = [
     {
       role: 'system',
@@ -82,8 +147,7 @@ export const generateAIResponse = async ({
 
   streams[streamId] = await openai.chat.completions.create({
     // model: 'gpt-3.5-turbo',
-    model: 'gpt-4',
-
+    model: 'gpt-4o',
     messages,
     stream: true,
   });
@@ -98,7 +162,9 @@ export const generateAIResponse = async ({
       ],
     );
 
-    shareDBDoc.submitOp(op, { source: AISourceName });
+    shareDBDoc.submitOp(op, {
+      source: AIShareDBSourceName,
+    });
 
     if (slowdown) {
       await new Promise((resolve) => {

package/src/server/handleAICopilot.js

@@ -0,0 +1,77 @@
+import OpenAI from 'openai';
+
+// This module implements the generation of the copilot response,
+// using the OpenAI client (but not necessarily the OpenAI service).
+
+// Debug flag to log more information during development.
+const debug = false;
+
+// These environment variables are used to configure the OpenAI client.
+// See `.env.sample` for the expected values.
+const {
+  VZCODE_AI_COPILOT_API_KEY,
+  VZCODE_AI_COLIPOT_BASE_URL,
+  VZCODE_AI_COLIPOT_MODEL,
+} = process.env;
+
+// If neither of these are not set, the OpenAI client will not be initialized,
+// e.g. for local development where no AI is needed.
+const isCopilotEnabled =
+  VZCODE_AI_COPILOT_API_KEY !== undefined &&
+  VZCODE_AI_COLIPOT_BASE_URL !== undefined &&
+  VZCODE_AI_COLIPOT_MODEL !== undefined;
+
+debug &&
+  console.log('isCopilotEnabled: ' + isCopilotEnabled);
+
+let openai;
+if (isCopilotEnabled) {
+  const openAIOptions = {
+    apiKey: VZCODE_AI_COPILOT_API_KEY,
+    baseURL: VZCODE_AI_COLIPOT_BASE_URL,
+  };
+  debug &&
+    console.log(
+      'openAIOptions: ' +
+        JSON.stringify(openAIOptions, null, 2),
+    );
+  openai = new OpenAI(openAIOptions);
+}
+
+export const handleAICopilot =
+  (/*TODO shareDBDoc*/) => async (req, res) => {
+    // Don't break if the AI is not enabled.
+    // This is useful for local development.
+    if (!isCopilotEnabled) {
+      res.status(200).send({ text: '' });
+      return;
+    }
+    const { prefix, suffix } = req.body;
+
+    const prompt = `<|fim_prefix|>${prefix}<|fim_suffix|>${suffix}<|fim_middle|>`;
+
+    if (debug) {
+      console.log(
+        '[generateAIResponse] prompt:\n```\n' +
+          prompt +
+          '\n```\n',
+      );
+    }
+    try {
+      const completion = await openai.completions.create({
+        model: VZCODE_AI_COLIPOT_MODEL,
+        prompt,
+        max_tokens: 150,
+        stop: ['<|fim_pad|>', '<|file_sep|>'],
+      });
+      const text = completion.choices[0].text;
+
+      res.status(200).send({ text });
+    } catch (error) {
+      console.error('handleAICopilot error:', error);
+      res.status(500).send({
+        message: 'Internal Server Error',
+        error: error.message,
+      });
+    }
+  };