vzcode 2.3.0 → 2.4.0

package/src/client/VZSidebar/VisualEditor.tsx

@@ -0,0 +1,282 @@
+import {
+  useCallback,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+} from 'react';
+import { VZCodeContext } from '../VZCodeContext';
+import { VizContent, VizFileId } from '@vizhub/viz-types';
+import { VisualEditorConfigEntry } from '../../types';
+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, 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) {
+    if (files[fileId].name === CONFIG_FILE_NAME) {
+      configFileId = fileId;
+      break;
+    }
+  }
+
+  if (configFileId === null) {
+    return (
+      <EmptyState>
+        To begin using the visual editor, create a
+        config.json.
+      </EmptyState>
+    );
+  }
+
+  let configData;
+
+  try {
+    configData = JSON.parse(files[configFileId].text);
+  } catch (error) {
+    return (
+      <EmptyState>
+        Your config.json file is not valid json.
+      </EmptyState>
+    );
+  }
+
+  if (!('visualEditorWidgets' in configData)) {
+    return (
+      <EmptyState>
+        To begin using the visual editor, make sure your
+        config.json has a key called "visualEditorWidgets",
+        whose value is the config for the visual editor.
+      </EmptyState>
+    );
+  }
+
+  if (!Array.isArray(configData.visualEditorWidgets)) {
+    return (
+      <EmptyState>
+        Your config.json file has "visualEditorWidgets" but
+        it is not an array. Please make sure
+        "visualEditorWidgets" is an array of widget
+        configurations.
+      </EmptyState>
+    );
+  }
+
+  const onSliderChange = useCallback(
+    (property: string) =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = parseFloat(
+          event.currentTarget.value,
+        );
+
+        // Update local state immediately for responsive UI
+        setLocalValues((prev) => ({
+          ...prev,
+          [property]: newValue,
+        }));
+
+        // Update config.json
+        const newConfigData = {
+          ...configData,
+          [property]: newValue,
+        };
+
+        submitOperation((document: VizContent) => ({
+          ...document,
+          files: {
+            ...files,
+            [configFileId]: {
+              name: 'config.json',
+              text: JSON.stringify(newConfigData, null, 2),
+            },
+          },
+        }));
+      },
+    [configData, files, configFileId, setLocalValues],
+  );
+
+  const visualEditorWidgets: VisualEditorConfigEntry[] =
+    configData.visualEditorWidgets;
+
+  // 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]);
+
+  // Track previous config state to detect changes from any source (remote clients, text editor, etc.)
+  const previousConfigRef = useRef<any>(null);
+
+  // Detect config.json changes and send updates to iframe
+  useEffect(() => {
+    if (!configFileId || !files || !files[configFileId]) {
+      return;
+    }
+
+    let newConfigData;
+    try {
+      newConfigData = JSON.parse(files[configFileId].text);
+    } catch (error) {
+      // If config is invalid JSON, we can't process changes
+      return;
+    }
+
+    const previousConfig = previousConfigRef.current;
+
+    // Update the ref with the new config
+    previousConfigRef.current = newConfigData;
+
+    // Skip processing if this is the first time or if there's no previous config
+    if (!previousConfig) {
+      return;
+    }
+
+    // Find changed top-level properties
+    const changedProperties: { [key: string]: any } = {};
+
+    // 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];
+        }
+      }
+    }
+
+    // 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;
+      }
+    }
+
+    // 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,
+            widgetConfig.min,
+            widgetConfig.max,
+          );
+
+          return (
+            <div
+              key={widgetConfig.property}
+              className="visual-editor-slider"
+            >
+              <div className="slider-header">
+                <label
+                  htmlFor={widgetConfig.property}
+                  className="slider-label"
+                >
+                  {widgetConfig.label}
+                </label>
+                <span className="slider-value">
+                  {formatValue(
+                    currentValue,
+                    widgetConfig.min,
+                    widgetConfig.max,
+                  )}
+                </span>
+              </div>
+              <div className="slider-container">
+                <input
+                  type="range"
+                  id={widgetConfig.property}
+                  className="slider-input"
+                  min={widgetConfig.min}
+                  max={widgetConfig.max}
+                  step="any"
+                  value={currentValue}
+                  onChange={onSliderChange(
+                    widgetConfig.property,
+                  )}
+                />
+                <div
+                  className="slider-track-fill"
+                  style={{ width: `${percentage}%` }}
+                />
+              </div>
+              <div className="slider-bounds">
+                <span className="min-value">
+                  {widgetConfig.min}
+                </span>
+                <span className="max-value">
+                  {widgetConfig.max}
+                </span>
+              </div>
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};

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/aiCopyPaste.ts

@@ -0,0 +1,199 @@
+import {
+  formatMarkdownFiles,
+  parseMarkdownFiles,
+} from 'llm-code-format';
+import {
+  FORMAT_INSTRUCTIONS,
+  mergeFileChanges,
+} from 'editcodewithai';
+import { VizFiles } from '@vizhub/viz-types';
+import {
+  generateRunId,
+  vizFilesToFileCollection,
+} from '@vizhub/viz-utils';
+import JSZip from 'jszip';
+import { generate } from '@langchain/core/dist/utils/fast-json-patch';
+
+export const createAICopyPasteHandlers = (
+  files: VizFiles,
+  submitOperation: any,
+  setCopyButtonText: (text: string) => void,
+  setPasteButtonText: (text: string) => void,
+  setExportButtonText: (text: string) => void,
+) => {
+  // Copy for AI - formats all files and copies to clipboard
+  const handleCopyForAI = async () => {
+    if (!files || Object.keys(files).length === 0) {
+      setCopyButtonText('No files to copy');
+      setTimeout(
+        () => setCopyButtonText('Copy for AI'),
+        2000,
+      );
+      return;
+    }
+
+    try {
+      const fileCollection =
+        vizFilesToFileCollection(files);
+
+      // Format files for AI consumption
+      const formattedFiles =
+        formatMarkdownFiles(fileCollection) +
+        '\n\n' +
+        FORMAT_INSTRUCTIONS.whole;
+
+      // Copy to clipboard
+      await navigator.clipboard.writeText(formattedFiles);
+
+      // Show success feedback
+      setCopyButtonText('Copied!');
+      setTimeout(
+        () => setCopyButtonText('Copy for AI'),
+        2000,
+      );
+    } catch (error) {
+      console.error('Failed to copy files for AI:', error);
+      setCopyButtonText('Error');
+      setTimeout(
+        () => setCopyButtonText('Copy for AI'),
+        2000,
+      );
+    }
+  };
+
+  // Paste for AI - parses clipboard content and updates files
+  const handlePasteForAI = async () => {
+    if (!submitOperation) return;
+
+    try {
+      // Read from clipboard
+      const clipboardText =
+        await navigator.clipboard.readText();
+
+      // Handle various line endings
+      const normalized = clipboardText.replace(
+        /\r\n?/g,
+        '\n',
+      );
+
+      if (!normalized.trim()) {
+        setPasteButtonText('Empty clipboard');
+        setTimeout(
+          () => setPasteButtonText('Paste for AI'),
+          2000,
+        );
+        return;
+      }
+
+      // Preprocess to remove formatting instructions section to avoid creating extra files
+      const preprocessed = normalized
+        .split('## Formatting Instructions')[0]
+        .trim();
+
+      // Parse the markdown files format
+      const parsed = parseMarkdownFiles(
+        preprocessed,
+        'bold',
+      );
+
+      if (
+        parsed.files &&
+        Object.keys(parsed.files).length > 0
+      ) {
+        // Use mergeFileChanges utility from editcodewithai
+        const mergedFiles = mergeFileChanges(
+          files || {},
+          parsed.files,
+        );
+
+        // Update files using the submit operation
+        submitOperation((document) => ({
+          ...document,
+          files: mergedFiles,
+          runId: generateRunId(),
+        }));
+
+        const fileCount = Object.keys(parsed.files).length;
+        setPasteButtonText('Pasted!');
+        setTimeout(
+          () => setPasteButtonText('Paste for AI'),
+          2000,
+        );
+      } else {
+        setPasteButtonText('No files found');
+        setTimeout(
+          () => setPasteButtonText('Paste for AI'),
+          2000,
+        );
+      }
+    } catch (error) {
+      console.error(
+        'Failed to paste files from AI:',
+        error,
+      );
+      setPasteButtonText('Error');
+      setTimeout(
+        () => setPasteButtonText('Paste for AI'),
+        2000,
+      );
+    }
+  };
+
+  // Export to ZIP - creates and downloads a ZIP file with all viz files
+  const handleExportToZip = async () => {
+    if (!files || Object.keys(files).length === 0) {
+      setExportButtonText('No files to export');
+      setTimeout(
+        () => setExportButtonText('Export to ZIP'),
+        2000,
+      );
+      return;
+    }
+
+    try {
+      // Create the ZIP
+      const zip = new JSZip();
+
+      // Add each file to the ZIP
+      Object.entries(files).forEach(([fileId, file]) => {
+        const fileName = file.name || fileId;
+        const fileContent = file.text || '';
+        zip.file(fileName, fileContent);
+      });
+
+      // Generate and download
+      const blob = await zip.generateAsync({
+        type: 'blob',
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'viz-files.zip';
+      a.click();
+      URL.revokeObjectURL(url);
+
+      // Show success feedback
+      setExportButtonText('Exported!');
+      setTimeout(
+        () => setExportButtonText('Export to ZIP'),
+        2000,
+      );
+    } catch (error) {
+      console.error(
+        'Failed to export files to ZIP:',
+        error,
+      );
+      setExportButtonText('Error');
+      setTimeout(
+        () => setExportButtonText('Export to ZIP'),
+        2000,
+      );
+    }
+  };
+
+  return {
+    handleCopyForAI,
+    handlePasteForAI,
+    handleExportToZip,
+  };
+};