vzcode 2.2.0 → 2.3.0

package/src/client/VZSidebar/VisualEditor.tsx

@@ -1,282 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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,
-  };
-};