npm - vzcode - Versions diffs - 1.62.0 → 2.2.0 - Mend

vzcode 1.62.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/assets/{index-Br76WttW.css → index-BM8tDh6M.css} +1 -1
package/dist/assets/{index-vbF7Aejt.js → index-CpxqGhXj.js} +163 -163
package/dist/index.html +2 -2
package/package.json +2 -1
package/src/client/Icons/MicOffSVG.tsx +35 -0
package/src/client/Icons/index.tsx +2 -0
package/src/client/VZCodeContext/types.ts +1 -0
package/src/client/VZCodeContext/useVZCodeState.ts +2 -0
package/src/client/VZSidebar/AIChat/ChatInput.tsx +58 -15
package/src/client/VZSidebar/AIChat/MessageList.tsx +23 -0
package/src/client/VZSidebar/AIChat/useSpeechRecognition.ts +117 -0
package/src/client/VZSidebar/DeleteConfirmationModal.tsx +15 -4
package/src/client/VZSidebar/VisualEditor.tsx +120 -133
package/src/client/VZSidebar/aiCopyPaste.ts +1 -1
package/src/client/VZSidebar/index.tsx +42 -0
package/src/client/VZSidebar/styles.scss +15 -0
package/src/client/useFileCRUD.ts +14 -0
package/src/server/aiChatHandler/aiEditing.ts +50 -1
package/src/server/prettier.ts +115 -0

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-vbF7Aejt.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Br76WttW.css">
+    <script type="module" crossorigin src="/assets/index-CpxqGhXj.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BM8tDh6M.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "1.62.0",
+  "version": "2.2.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",
@@ -160,6 +160,7 @@
     "jszip": "^3.10.1",
     "livekit-server-sdk": "^2.13.1",
     "llm-code-format": "^3.0.0",
+    "lucide-react": "^0.539.0",
     "npm": "^11.5.2",
     "open": "^10.2.0",
     "prettier-plugin-svelte": "^3.4.0",

package/src/client/Icons/MicOffSVG.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+export const MicOffSVG = () => (
+  <svg
+    fill="#000000"
+    height="24"
+    width="24"
+    stroke="currentColor"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 512 512"
+    enableBackground="new 0 0 512 512"
+  >
+    <g>
+      <g>
+        <path
+          fill="currentColor"
+          d="m439.5,236c0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,70-64,126.9-142.7,126.9-78.7,0-142.7-56.9-142.7-126.9 0-11.3-9.1-20.4-20.4-20.4s-20.4,9.1-20.4,20.4c0,86.2 71.5,157.4 163.1,166.7v57.5h-23.6c-11.3,0-20.4,9.1-20.4,20.4 0,11.3 9.1,20.4 20.4,20.4h88c11.3,0 20.4-9.1 20.4-20.4 0-11.3-9.1-20.4-20.4-20.4h-23.6v-57.5c91.6-9.3 163.1-80.5 163.1-166.7z"
+        />
+        <path
+          fill="currentColor"
+          d="m256,323.5c51,0 92.3-41.3 92.3-92.3v-127.9c0-51-41.3-92.3-92.3-92.3s-92.3,41.3-92.3,92.3v127.9c0,51 41.3,92.3 92.3,92.3zm-52.3-220.2c0-28.8 23.5-52.3 52.3-52.3s52.3,23.5 52.3,52.3v127.9c0,28.8-23.5,52.3-52.3,52.3s-52.3-23.5-52.3-52.3v-127.9z"
+        />
+        {/* Diagonal line to indicate "off" state */}
+        <line
+          x1="100"
+          y1="100"
+          x2="412"
+          y2="412"
+          stroke="currentColor"
+          strokeWidth="40"
+          strokeLinecap="round"
+        />
+      </g>
+    </g>
+  </svg>
+);

package/src/client/Icons/index.tsx CHANGED Viewed

@@ -21,4 +21,6 @@ export { HtmlSVG } from './HtmlSVG';
 export { CssSVG } from './CssSVG';
 export { JsonSVG } from './JsonSVG';
 export { MarkdownSVG } from './MarkdownSVG';
+export { MicSVG } from './MicSVG';
+export { MicOffSVG } from './MicOffSVG';
 export { AdjustmentSVG } from './AdjustmentSVG';

package/src/client/VZCodeContext/types.ts CHANGED Viewed

@@ -41,6 +41,7 @@ export type VZCodeContextValue = {
     directoryName: string,
   ) => void;
   deleteDirectory: (directoryId: string) => void;
+  deleteAllFiles: () => void;
   setActiveFileId: (fileId: string | null) => void;
   setActiveFileLeft: () => void;

package/src/client/VZCodeContext/useVZCodeState.ts CHANGED Viewed

@@ -184,6 +184,7 @@ export const useVZCodeState = ({
     createDirectory,
     renameDirectory,
     deleteDirectory,
+    deleteAllFiles,
   } = useFileCRUD({
     submitOperation,
     closeTabs,
@@ -461,6 +462,7 @@ export const useVZCodeState = ({
     createDirectory,
     renameDirectory,
     deleteDirectory,
+    deleteAllFiles,
     setActiveFileId,
     setActiveFileLeft,

package/src/client/VZSidebar/AIChat/ChatInput.tsx CHANGED Viewed

@@ -11,6 +11,8 @@ import {
   ToggleButton,
 } from '../../bootstrap';
 import { enableAskMode } from '../../featureFlags';
+import { useSpeechRecognition } from './useSpeechRecognition';
+import { MicSVG, MicOffSVG } from '../../Icons';
 interface ChatInputProps {
   aiChatMessage: string;
@@ -39,6 +41,13 @@ const ChatInputComponent = ({
 }: ChatInputProps) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  // Use the speech recognition hook
+  const {
+    isSpeaking,
+    toggleSpeechRecognition,
+    stopSpeaking,
+  } = useSpeechRecognition(setAIChatMessage);
   useEffect(() => {
     // Focus the input when the AI chat is focused
     if (focused && inputRef.current) {
@@ -92,8 +101,12 @@ const ChatInputComponent = ({
   );
   const handleSendClick = useCallback(() => {
+    // If speech recognition is active, stop it
+    if (isSpeaking) {
+      stopSpeaking();
+    }
     onSendMessage();
-  }, [onSendMessage]);
+  }, [onSendMessage, isSpeaking, stopSpeaking]);
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -173,20 +186,50 @@ const ChatInputComponent = ({
           <span className="ai-chat-hint">
             {aiChatMessage ? 'Press Enter to send' : ''}
           </span>
-          <Button
-            variant={
-              aiChatMessage.trim()
-                ? 'primary'
-                : 'outline-secondary'
-            }
-            onClick={handleSendClick}
-            disabled={!aiChatMessage.trim() || isLoading}
-            className="ai-chat-send-button"
-            aria-label="Send message"
-            title="Send message (Enter)"
-          >
-            Send
-          </Button>
+          <div style={{ display: 'flex', gap: '8px' }}>
+            <Button
+              variant={
+                isSpeaking ? 'danger' : 'outline-secondary'
+              }
+              size="sm"
+              onClick={toggleSpeechRecognition}
+              disabled={isLoading}
+              aria-label={
+                isSpeaking
+                  ? 'Stop voice typing'
+                  : 'Start voice typing'
+              }
+              title={
+                isSpeaking
+                  ? 'Stop voice typing'
+                  : 'Start voice typing'
+              }
+              style={{
+                borderColor: isSpeaking
+                  ? undefined
+                  : '#dee2e6',
+                borderRadius: '0.375rem',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+              }}
+            >
+              {isSpeaking ? <MicOffSVG /> : <MicSVG />}
+            </Button>
+            <Button
+              variant={
+                aiChatMessage.trim()
+                  ? 'primary'
+                  : 'outline-secondary'
+              }
+              onClick={handleSendClick}
+              disabled={!aiChatMessage.trim() || isLoading}
+              className="ai-chat-send-button"
+              aria-label="Send message"
+              title="Send message (Enter)"
+            >
+              Send
+            </Button>
+          </div>
         </div>
       </Form.Group>
     </div>

package/src/client/VZSidebar/AIChat/MessageList.tsx CHANGED Viewed

@@ -107,6 +107,29 @@ const MessageListComponent = ({
     scrollToBottom,
   ]);
+  // Track previous loading state to detect when AI generation completes
+  const [prevIsLoading, setPrevIsLoading] =
+    useState(isLoading);
+  // Scroll to bottom when AI generation completes (loading changes from true to false)
+  useEffect(() => {
+    // If AI was generating and now it's finished, scroll to bottom
+    if (prevIsLoading && !isLoading) {
+      // Force scroll to bottom regardless of user scroll state
+      // This ensures we always scroll to bottom when generation completes
+      messagesEndRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+      });
+      // Re-enable auto-scroll for future messages
+      setIsUserScrolled(false);
+      setAutoScrollEnabled(true);
+    }
+    setPrevIsLoading(isLoading);
+  }, [isLoading, prevIsLoading]);
   // Clean up timeout on unmount
   useEffect(() => {
     return () => {

package/src/client/VZSidebar/AIChat/useSpeechRecognition.ts ADDED Viewed

@@ -0,0 +1,117 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  Dispatch,
+  SetStateAction,
+} from 'react';
+export interface UseSpeechRecognitionResult {
+  isSpeaking: boolean;
+  toggleSpeechRecognition: () => void;
+  stopSpeaking: () => void;
+}
+export const useSpeechRecognition = (
+  onTranscriptChange: Dispatch<SetStateAction<string>>,
+): UseSpeechRecognitionResult => {
+  const [isSpeaking, setIsSpeaking] =
+    useState<boolean>(false);
+  const [recognition, setRecognition] =
+    // @ts-ignore
+    useState<SpeechRecognition | null>(null);
+  const [finalTranscript, setFinalTranscript] =
+    useState<string>('');
+  // Speech recognition setup
+  useEffect(() => {
+    // Check if browser supports SpeechRecognition
+    const SpeechRecognition =
+      // @ts-ignore
+      window.SpeechRecognition ||
+      // @ts-ignore
+      window.webkitSpeechRecognition;
+    if (SpeechRecognition) {
+      const recognitionInstance = new SpeechRecognition();
+      recognitionInstance.continuous = true;
+      recognitionInstance.interimResults = true;
+      recognitionInstance.onresult = (event) => {
+        let finalText = '';
+        let interimText = '';
+        // Process all results to separate final and interim text
+        for (let i = 0; i < event.results.length; i++) {
+          const result = event.results[i];
+          if (result.isFinal) {
+            finalText += result[0].transcript;
+          } else {
+            interimText += result[0].transcript;
+          }
+        }
+        // Update our final transcript state
+        setFinalTranscript(finalText);
+        // Combine final and interim text and update the prompt
+        const fullTranscript = finalText + interimText;
+        onTranscriptChange(fullTranscript);
+      };
+      recognitionInstance.onerror = (event) => {
+        console.error(
+          'Speech recognition error',
+          event.error,
+        );
+        setIsSpeaking(false);
+      };
+      recognitionInstance.onend = () => {
+        setIsSpeaking(false);
+        // Reset final transcript when recognition ends
+        setFinalTranscript('');
+      };
+      setRecognition(recognitionInstance);
+      return () => {
+        recognitionInstance.abort();
+      };
+    }
+  }, [onTranscriptChange]);
+  const toggleSpeechRecognition = useCallback(() => {
+    if (!recognition) {
+      console.error(
+        'Speech recognition not supported in this browser',
+      );
+      return;
+    }
+    if (isSpeaking) {
+      recognition.stop();
+      setIsSpeaking(false);
+    } else {
+      // Reset final transcript when starting new recognition
+      setFinalTranscript('');
+      recognition.start();
+      setIsSpeaking(true);
+    }
+  }, [isSpeaking, recognition]);
+  const stopSpeaking = useCallback(() => {
+    if (recognition && isSpeaking) {
+      recognition.stop();
+      setIsSpeaking(false);
+      // Reset final transcript when manually stopping
+      setFinalTranscript('');
+    }
+  }, [isSpeaking, recognition]);
+  return {
+    isSpeaking,
+    toggleSpeechRecognition,
+    stopSpeaking,
+  };
+};

package/src/client/VZSidebar/DeleteConfirmationModal.tsx CHANGED Viewed

@@ -36,15 +36,26 @@ export const DeleteConfirmationModal = ({
     <Modal show={show} onHide={onClose} centered>
       <Modal.Header closeButton onClick={onClose}>
         <Modal.Title>
-          Delete {isDirectory ? 'Directory' : 'File'}
+          Delete{' '}
+          {name === 'all files'
+            ? 'All Files'
+            : isDirectory
+              ? 'Directory'
+              : 'File'}
         </Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <p>
-          This will delete the{' '}
-          {isDirectory ? 'directory' : 'file'}{' '}
-          <strong>{name}</strong>.
+          {name === 'all files' ? (
+            'This will delete all files in the project.'
+          ) : (
+            <>
+              This will delete the{' '}
+              {isDirectory ? 'directory' : 'file'}{' '}
+              <strong>{name}</strong>.
+            </>
+          )}
         </p>
       </Modal.Body>