vzcode 2.0.0 → 2.3.0

package/src/client/VZSidebar/VisualEditor.tsx

@@ -1,295 +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';
-
-export const VisualEditor = () => {
-  const {
-    files,
-    submitOperation,
-    runPrettierRef,
-    iframeRef,
-  } = useContext(VZCodeContext);
-
-  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 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 newValueOfConsistentType =
-          typeof previousValue === 'number'
-            ? parseFloat(event.currentTarget.value)
-            : event.currentTarget.value;
-
-        const newConfigData = {
-          ...configData,
-          [property]: newValueOfConsistentType,
-        };
-
-        submitOperation((document: VizContent) => ({
-          ...document,
-          files: {
-            ...files,
-            [configFileId]: {
-              name: 'config.json',
-              text: JSON.stringify(newConfigData, null, 2),
-            },
-          },
-        }));
-
-        iframeRef.current.contentWindow.postMessage({
-          [property]: newValueOfConsistentType,
-        });
-      },
-    [configData, files, configFileId],
-  );
-
-  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;
-
-        const newConfigData = {
-          ...configData,
-          [property]: newValueOfConsistentType,
-        };
-
-        submitOperation((document: VizContent) => ({
-          ...document,
-          files: {
-            ...files,
-            [configFileId]: {
-              name: 'config.json',
-              text: JSON.stringify(newConfigData, null, 2),
-            },
-          },
-        }));
-
-        iframeRef.current.contentWindow.postMessage({
-          [property]: newValueOfConsistentType,
-        });
-
-        // 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],
-  );
-
-  // Mouse event handlers for enhanced interactions
-  const handleMouseDown = (property: string) => {
-    setIsDragging(property);
-    setActiveSlider(property);
-  };
-
-  const handleMouseUp = () => {
-    setIsDragging(null);
-  };
-
-  const handleMouseEnter = (property: string) => {
-    setActiveSlider(property);
-  };
-
-  const handleMouseLeave = () => {
-    setActiveSlider(null);
-    setHoverValue(null);
-  };
-
-  // Add global mouse up listener
-  useEffect(() => {
-    const handleGlobalMouseUp = () => {
-      setIsDragging(null);
-    };
-
-    document.addEventListener(
-      'mouseup',
-      handleGlobalMouseUp,
-    );
-    return () => {
-      document.removeEventListener(
-        'mouseup',
-        handleGlobalMouseUp,
-      );
-    };
-  }, []);
-
-  return (
-    <div className="visual-editor">
-      {visualEditorWidgets.map((widgetConfig, index) => {
-        if (widgetConfig.type === 'number') {
-          const currentValue =
-            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"
-                  onInput={onInputUpdate(
-                    widgetConfig.property,
-                    configData[widgetConfig.property],
-                  )}
-                  defaultValue={currentValue}
-                />
-                <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,
-  };
-};