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

vzcode 2.0.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 (8) hide show

package/dist/assets/{index-BgqNq-ww.js → index-CpxqGhXj.js} +157 -157
package/dist/index.html +1 -1
package/package.json +2 -1
package/src/client/Icons/MicOffSVG.tsx +35 -0
package/src/client/Icons/index.tsx +2 -0
package/src/client/VZSidebar/AIChat/ChatInput.tsx +58 -15
package/src/client/VZSidebar/AIChat/useSpeechRecognition.ts +117 -0
package/src/client/VZSidebar/VisualEditor.tsx +120 -133

package/dist/index.html CHANGED Viewed

@@ -20,7 +20,7 @@
       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-BgqNq-ww.js"></script>
+    <script type="module" crossorigin src="/assets/index-CpxqGhXj.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BM8tDh6M.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "2.0.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/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/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/VisualEditor.tsx CHANGED Viewed

@@ -12,13 +12,36 @@ import { EmptyState } from './EmptyState';
 const CONFIG_FILE_NAME = 'config.json';
+// Helper function to calculate percentage for progress fill
+const calculatePercentage = (
+  value: number,
+  min: number,
+  max: number,
+) => {
+  return ((value - min) / (max - min)) * 100;
+};
+// Helper function to format values nicely
+const formatValue = (
+  value: number,
+  min: number,
+  max: number,
+) => {
+  // Determine decimal places based on the range
+  const range = max - min;
+  const decimalPlaces =
+    range < 10 ? 2 : range < 100 ? 1 : 0;
+  return Number(value).toFixed(decimalPlaces);
+};
 export const VisualEditor = () => {
-  const {
-    files,
-    submitOperation,
-    runPrettierRef,
-    iframeRef,
-  } = useContext(VZCodeContext);
+  const { files, submitOperation, iframeRef } =
+    useContext(VZCodeContext);
+  // Local state to track slider values during user interaction
+  const [localValues, setLocalValues] = useState<{
+    [key: string]: number;
+  }>({});
   let configFileId: VizFileId | null = null;
   for (const fileId in files) {
@@ -70,22 +93,23 @@ export const VisualEditor = () => {
     );
   }
-  const onInputUpdate = useCallback(
-    (
-      property: string,
-      previousValue: any,
-    ): React.FormEventHandler<HTMLInputElement> =>
-      (event) => {
-        //TODO: test race condition in which someone is editing the config file as another user uses the visual editor
+  const onSliderChange = useCallback(
+    (property: string) =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = parseFloat(
+          event.currentTarget.value,
+        );
-        const newValueOfConsistentType =
-          typeof previousValue === 'number'
-            ? parseFloat(event.currentTarget.value)
-            : event.currentTarget.value;
+        // Update local state immediately for responsive UI
+        setLocalValues((prev) => ({
+          ...prev,
+          [property]: newValue,
+        }));
+        // Update config.json
         const newConfigData = {
           ...configData,
-          [property]: newValueOfConsistentType,
+          [property]: newValue,
         };
         submitOperation((document: VizContent) => ({
@@ -98,140 +122,104 @@ export const VisualEditor = () => {
             },
           },
         }));
-        iframeRef.current.contentWindow.postMessage({
-          [property]: newValueOfConsistentType,
-        });
       },
-    [configData, files, configFileId],
+    [configData, files, configFileId, setLocalValues],
   );
   const visualEditorWidgets: VisualEditorConfigEntry[] =
     configData.visualEditorWidgets;
-  // State for advanced interactions
-  const [activeSlider, setActiveSlider] = useState<
-    string | null
-  >(null);
-  const [isDragging, setIsDragging] = useState<
-    string | null
-  >(null);
-  const [hoverValue, setHoverValue] = useState<
-    number | null
-  >(null);
-  const sliderRefs = useRef<{
-    [key: string]: HTMLInputElement | null;
-  }>({});
-  // Helper function to format values nicely
-  const formatValue = (
-    value: number,
-    min: number,
-    max: number,
-  ) => {
-    // Determine decimal places based on the range
-    const range = max - min;
-    const decimalPlaces =
-      range < 10 ? 2 : range < 100 ? 1 : 0;
-    return Number(value).toFixed(decimalPlaces);
-  };
-  // Helper function to calculate percentage for progress fill
-  const calculatePercentage = (
-    value: number,
-    min: number,
-    max: number,
-  ) => {
-    return ((value - min) / (max - min)) * 100;
-  };
-  // Enhanced input handler with animations
-  const onInputUpdateEnhanced = useCallback(
-    (
-      property: string,
-      previousValue: any,
-      widgetConfig: VisualEditorConfigEntry,
-    ): React.FormEventHandler<HTMLInputElement> =>
-      (event) => {
-        const newValueOfConsistentType =
-          typeof previousValue === 'number'
-            ? parseFloat(event.currentTarget.value)
-            : event.currentTarget.value;
+  // Sync local values with config data when it changes (including remote updates)
+  useEffect(() => {
+    const newLocalValues: { [key: string]: number } = {};
+    visualEditorWidgets.forEach((widget) => {
+      if (widget.type === 'number') {
+        newLocalValues[widget.property] =
+          configData[widget.property];
+      }
+    });
+    setLocalValues(newLocalValues);
+  }, [configData, visualEditorWidgets]);
-        const newConfigData = {
-          ...configData,
-          [property]: newValueOfConsistentType,
-        };
+  // Track previous config state to detect changes from any source (remote clients, text editor, etc.)
+  const previousConfigRef = useRef<any>(null);
-        submitOperation((document: VizContent) => ({
-          ...document,
-          files: {
-            ...files,
-            [configFileId]: {
-              name: 'config.json',
-              text: JSON.stringify(newConfigData, null, 2),
-            },
-          },
-        }));
+  // Detect config.json changes and send updates to iframe
+  useEffect(() => {
+    if (!configFileId || !files || !files[configFileId]) {
+      return;
+    }
-        iframeRef.current.contentWindow.postMessage({
-          [property]: newValueOfConsistentType,
-        });
+    let newConfigData;
+    try {
+      newConfigData = JSON.parse(files[configFileId].text);
+    } catch (error) {
+      // If config is invalid JSON, we can't process changes
+      return;
+    }
-        // Trigger value change animation
-        const sliderElement = sliderRefs.current[property];
-        if (sliderElement) {
-          sliderElement.classList.add('value-changed');
-          setTimeout(() => {
-            sliderElement.classList.remove('value-changed');
-          }, 300);
-        }
-      },
-    [configData, files, configFileId],
-  );
+    const previousConfig = previousConfigRef.current;
-  // Mouse event handlers for enhanced interactions
-  const handleMouseDown = (property: string) => {
-    setIsDragging(property);
-    setActiveSlider(property);
-  };
+    // Update the ref with the new config
+    previousConfigRef.current = newConfigData;
-  const handleMouseUp = () => {
-    setIsDragging(null);
-  };
+    // Skip processing if this is the first time or if there's no previous config
+    if (!previousConfig) {
+      return;
+    }
-  const handleMouseEnter = (property: string) => {
-    setActiveSlider(property);
-  };
+    // Find changed top-level properties
+    const changedProperties: { [key: string]: any } = {};
-  const handleMouseLeave = () => {
-    setActiveSlider(null);
-    setHoverValue(null);
-  };
+    // Check all properties in the new config
+    for (const key in newConfigData) {
+      if (newConfigData[key] !== previousConfig[key]) {
+        // Deep comparison for objects to detect actual changes
+        if (
+          typeof newConfigData[key] === 'object' &&
+          typeof previousConfig[key] === 'object'
+        ) {
+          if (
+            JSON.stringify(newConfigData[key]) !==
+            JSON.stringify(previousConfig[key])
+          ) {
+            changedProperties[key] = newConfigData[key];
+          }
+        } else {
+          changedProperties[key] = newConfigData[key];
+        }
+      }
+    }
-  // Add global mouse up listener
-  useEffect(() => {
-    const handleGlobalMouseUp = () => {
-      setIsDragging(null);
-    };
+    // Check for deleted properties (properties that existed before but don't exist now)
+    for (const key in previousConfig) {
+      if (!(key in newConfigData)) {
+        changedProperties[key] = undefined;
+      }
+    }
-    document.addEventListener(
-      'mouseup',
-      handleGlobalMouseUp,
-    );
-    return () => {
-      document.removeEventListener(
-        'mouseup',
-        handleGlobalMouseUp,
-      );
-    };
-  }, []);
+    // Send changed properties to iframe if any changes were detected
+    if (Object.keys(changedProperties).length > 0) {
+      try {
+        iframeRef.current.contentWindow.postMessage(
+          changedProperties,
+        );
+      } catch (error) {
+        console.error(
+          'Failed to send config changes to iframe:',
+          error,
+        );
+      }
+    }
+  }, [files, configFileId, iframeRef]);
   return (
     <div className="visual-editor">
       {visualEditorWidgets.map((widgetConfig, index) => {
         if (widgetConfig.type === 'number') {
+          // Use local value if available, otherwise fall back to config value
           const currentValue =
+            localValues[widgetConfig.property] ??
             configData[widgetConfig.property];
           const percentage = calculatePercentage(
             currentValue,
@@ -267,11 +255,10 @@ export const VisualEditor = () => {
                   min={widgetConfig.min}
                   max={widgetConfig.max}
                   step="any"
-                  onInput={onInputUpdate(
+                  value={currentValue}
+                  onChange={onSliderChange(
                     widgetConfig.property,
-                    configData[widgetConfig.property],
                   )}
-                  defaultValue={currentValue}
                 />
                 <div
                   className="slider-track-fill"