vzcode 2.3.0 → 2.4.0

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

@@ -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/CreateDirModal.tsx

@@ -0,0 +1,111 @@
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useContext,
+} from 'react';
+import { Modal, Form, Button } from '../bootstrap';
+import { VZCodeContext } from '../VZCodeContext';
+
+export const CreateDirModal = ({
+  initialFileName = '',
+}) => {
+  const [newName, setNewName] = useState(initialFileName);
+  const inputRef = useRef(null);
+
+  const {
+    files,
+    isCreateDirModalOpen,
+    handleCloseCreateDirModal,
+    handleCreateDirClick,
+  } = useContext(VZCodeContext);
+
+  useEffect(() => {
+    if (isCreateDirModalOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isCreateDirModalOpen]);
+
+  const handleNameChange = useCallback((event) => {
+    setNewName(event.target.value);
+  }, []);
+
+  const onCreateClick = useCallback(() => {
+    handleCreateDirClick(newName);
+    setNewName('');
+  }, [newName, handleCreateDirClick]);
+
+  // Returns true if file name is valid, false otherwise.
+  const validateFileName = useCallback(
+    (fileName: string) => {
+      let valid;
+      //General Character Check
+      const regex =
+        /^[a-zA-Z0-9](?:[a-zA-Z0-9 ./+=_-]*[a-zA-Z0-9])?$/;
+      valid = regex.test(fileName);
+
+      //Check for Duplicate Filename
+      for (const key in files) {
+        if (fileName + '/' === files[key].name) {
+          valid = false;
+        }
+      }
+
+      return valid;
+    },
+    [files],
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (
+        e.key === 'Enter' &&
+        validateFileName(newName) &&
+        (e.ctrlKey ||
+          e.shiftKey ||
+          (!e.altKey && !e.metaKey))
+      ) {
+        onCreateClick();
+      }
+    },
+    [onCreateClick, validateFileName, newName],
+  );
+
+  return isCreateDirModalOpen ? (
+    <Modal
+      show={isCreateDirModalOpen}
+      onHide={handleCloseCreateDirModal}
+      animation={false}
+      onKeyDown={handleKeyDown}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Create Directory</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form.Group className="mb-3" controlId="fileName">
+          <Form.Label>Directory Name</Form.Label>
+          <Form.Control
+            type="text"
+            value={newName}
+            onChange={handleNameChange}
+            ref={inputRef}
+            spellCheck="false"
+          />
+          <Form.Text className="text-muted">
+            Enter the name for your file
+          </Form.Text>
+        </Form.Group>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="primary"
+          onClick={onCreateClick}
+          disabled={!validateFileName(newName)}
+        >
+          Create Directory
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  ) : null;
+};

package/src/client/VZSidebar/CreateFileModal.tsx

@@ -0,0 +1,111 @@
+import {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useContext,
+} from 'react';
+import { Modal, Form, Button } from '../bootstrap';
+import { VZCodeContext } from '../VZCodeContext';
+
+export const CreateFileModal = ({
+  initialFileName = '',
+}) => {
+  const [newName, setNewName] = useState(initialFileName);
+  const inputRef = useRef(null);
+
+  const {
+    files,
+    isCreateFileModalOpen,
+    handleCloseCreateFileModal,
+    handleCreateFileClick,
+  } = useContext(VZCodeContext);
+
+  useEffect(() => {
+    if (isCreateFileModalOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isCreateFileModalOpen]);
+
+  const handleNameChange = useCallback((event) => {
+    setNewName(event.target.value);
+  }, []);
+
+  const onCreateClick = useCallback(() => {
+    handleCreateFileClick(newName);
+    setNewName('');
+  }, [newName, handleCreateFileClick]);
+
+  // Returns true if file name is valid, false otherwise.
+  const validateFileName = useCallback(
+    (fileName: string) => {
+      let valid;
+      //General Character Check
+      const regex =
+        /^[a-zA-Z0-9](?:[a-zA-Z0-9 ./+=_-]*[a-zA-Z0-9])?$/;
+      valid = regex.test(fileName);
+
+      //Check for Duplicate Filename
+      for (const key in files) {
+        if (fileName === files[key].name) {
+          valid = false;
+        }
+      }
+
+      return valid;
+    },
+    [files],
+  );
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (
+        e.key === 'Enter' &&
+        validateFileName(newName) &&
+        (e.ctrlKey ||
+          e.shiftKey ||
+          (!e.altKey && !e.metaKey))
+      ) {
+        onCreateClick();
+      }
+    },
+    [onCreateClick, validateFileName, newName],
+  );
+
+  return isCreateFileModalOpen ? (
+    <Modal
+      show={isCreateFileModalOpen}
+      onHide={handleCloseCreateFileModal}
+      animation={false}
+      onKeyDown={handleKeyDown}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Create File</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form.Group className="mb-3" controlId="fileName">
+          <Form.Label>File Name</Form.Label>
+          <Form.Control
+            type="text"
+            value={newName}
+            onChange={handleNameChange}
+            ref={inputRef}
+            spellCheck="false"
+          />
+          <Form.Text className="text-muted">
+            Enter the name for your file
+          </Form.Text>
+        </Form.Group>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          variant="primary"
+          onClick={onCreateClick}
+          disabled={!validateFileName(newName)}
+        >
+          Create File
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  ) : null;
+};

package/src/client/VZSidebar/DeleteConfirmationModal.tsx

@@ -0,0 +1,76 @@
+import { Button, Modal } from '../bootstrap';
+import { useCallback, useEffect } from 'react';
+
+// Confirmation modal for deleting a file or directory.
+// Inspired by https://react-bootstrap.netlify.app/docs/components/modal/#live-demo
+
+export const DeleteConfirmationModal = ({
+  show,
+  onClose,
+  onConfirm,
+  isDirectory,
+  name,
+}) => {
+  const handleEnterKey = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        onConfirm();
+      }
+    },
+    [onConfirm],
+  );
+
+  useEffect(() => {
+    if (show) {
+      window.addEventListener('keydown', handleEnterKey);
+    } else {
+      window.removeEventListener('keydown', handleEnterKey);
+    }
+
+    return () => {
+      window.removeEventListener('keydown', handleEnterKey);
+    };
+  }, [show, handleEnterKey]);
+
+  return (
+    <Modal show={show} onHide={onClose} centered>
+      <Modal.Header closeButton onClick={onClose}>
+        <Modal.Title>
+          Delete{' '}
+          {name === 'all files'
+            ? 'All Files'
+            : isDirectory
+              ? 'Directory'
+              : 'File'}
+        </Modal.Title>
+      </Modal.Header>
+
+      <Modal.Body>
+        <p>
+          {name === 'all files' ? (
+            'This will delete all files in the project.'
+          ) : (
+            <>
+              This will delete the{' '}
+              {isDirectory ? 'directory' : 'file'}{' '}
+              <strong>{name}</strong>.
+            </>
+          )}
+        </p>
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Button
+          variant="secondary"
+          type="button"
+          onClick={onClose}
+        >
+          Cancel
+        </Button>
+        <Button variant="primary" onClick={onConfirm}>
+          Delete
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};

package/src/client/VZSidebar/DirectoryListing.tsx

@@ -0,0 +1,89 @@
+import { useCallback, useContext, useMemo } from 'react';
+import type { FileTree, FileTreeFile } from '../../types';
+import { DirectoryArrowSVG } from '../Icons';
+import { VZCodeContext } from '../VZCodeContext';
+import { Item } from './Item';
+import { Listing } from './Listing';
+
+export const DirectoryListing = ({
+  name,
+  path,
+  children,
+  handleFileClick,
+  handleFileDoubleClick,
+}: {
+  name: string;
+  path: string;
+  children: Array<FileTree | FileTreeFile>;
+  handleFileClick: (fileId: string) => void;
+  handleFileDoubleClick: (fileId: string) => void;
+}) => {
+  const {
+    renameDirectory,
+    deleteDirectory,
+    isDirectoryOpen,
+    toggleDirectory,
+    sidebarPresenceIndicators,
+  } = useContext(VZCodeContext);
+
+  const handleClick = useCallback(() => {
+    toggleDirectory(path);
+  }, [toggleDirectory, path]);
+
+  const handleDeleteClick = useCallback(() => {
+    deleteDirectory(path);
+  }, [deleteDirectory, path]);
+
+  const handleRenameClick = useCallback(
+    (newName: string) => {
+      renameDirectory(path, name, newName);
+    },
+    [renameDirectory, path, name],
+  );
+
+  const isOpen = useMemo(
+    () => isDirectoryOpen(path),
+    [isDirectoryOpen, path],
+  );
+
+  return (
+    <>
+      <Item
+        id={path}
+        name={name}
+        handleClick={handleClick}
+        handleDeleteClick={handleDeleteClick}
+        handleRenameClick={handleRenameClick}
+        isDirectory={true}
+      >
+        <div
+          className="arrow-wrapper"
+          style={{
+            transform: `rotate(${isOpen ? 90 : 0}deg)`,
+          }}
+        >
+          <DirectoryArrowSVG />
+        </div>
+        <div className="name">{name}</div>
+      </Item>
+      {children && isOpen ? (
+        <div className="indentation">
+          {children.map((entity) => {
+            const { fileId } = entity as FileTreeFile;
+            const { path } = entity as FileTree;
+            return (
+              <Listing
+                entity={entity}
+                key={fileId || path}
+                handleFileClick={handleFileClick}
+                handleFileDoubleClick={
+                  handleFileDoubleClick
+                }
+              />
+            );
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+};

package/src/client/VZSidebar/EmptyState.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+interface EmptyStateProps {
+  children: React.ReactNode;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  children,
+}) => {
+  return <div className="empty-state">{children}</div>;
+};

package/src/client/VZSidebar/FileListing.tsx

@@ -0,0 +1,91 @@
+import { useCallback, useContext } from 'react';
+import { Item } from './Item';
+import { PresenceIndicator } from '../../types';
+import { VizFileId } from '@vizhub/viz-types';
+import { VZCodeContext } from '../VZCodeContext';
+import { FileTypeIcon } from './FileTypeIcon';
+import { assignUserColor } from '../presenceColor';
+
+const PresenceIndicators = ({
+  presence,
+}: {
+  presence: PresenceIndicator[];
+}) => {
+  return (
+    <div className="presence-indicators">
+      {presence.map((indicator, index) => {
+        // Get the raw RGB values from assignUserColor
+        const color = assignUserColor(indicator.username);
+
+        // Format it as `rgb()` directly in the component
+        const formattedColor = `rgb(${color})`;
+
+        //console.log(`Username: ${indicator.username}, Assigned Color: ${formattedColor}`);
+
+        return (
+          <div
+            key={index}
+            className="presence-indicator"
+            style={{ backgroundColor: formattedColor }}
+          >
+            {indicator.username[0]}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export const FileListing = ({
+  name,
+  fileId,
+  handleFileClick,
+  handleFileDoubleClick,
+  isActive,
+  presence,
+}: {
+  name: string;
+  fileId: VizFileId;
+  handleFileClick: (fileId: VizFileId) => void;
+  handleFileDoubleClick: (fileId: VizFileId) => void;
+  isActive: boolean;
+  presence: PresenceIndicator[];
+}) => {
+  const { renameFile, deleteFile } =
+    useContext(VZCodeContext);
+
+  const handleClick = useCallback(() => {
+    handleFileClick(fileId);
+  }, [fileId, handleFileClick]);
+
+  const handleDoubleClick = useCallback(() => {
+    handleFileDoubleClick(fileId);
+  }, [fileId, handleFileDoubleClick]);
+
+  const handleDeleteClick = useCallback(() => {
+    deleteFile(fileId);
+  }, [fileId, deleteFile]);
+
+  const handleRenameClick = useCallback(
+    (newName: string) => {
+      renameFile(fileId, newName);
+    },
+    [fileId, renameFile],
+  );
+
+  return (
+    <Item
+      id={fileId}
+      name={name}
+      handleClick={handleClick}
+      handleDoubleClick={handleDoubleClick}
+      handleDeleteClick={handleDeleteClick}
+      handleRenameClick={handleRenameClick}
+      isActive={isActive}
+    >
+      <PresenceIndicators presence={presence} />
+      <FileTypeIcon name={name} />
+      {name}
+    </Item>
+  );
+};

package/src/client/VZSidebar/FileTypeIcon.tsx

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import {
+  FileSVG,
+  JavaScriptSVG,
+  TypeScriptSVG,
+  ReactSVG,
+  SvelteSVG,
+  JsonSVG,
+  MarkdownSVG,
+  HtmlSVG,
+  CssSVG,
+} from '../Icons';
+
+export function getExtensionIcon(fileName: string) {
+  const extension = fileName.split('.');
+
+  switch (extension[extension.length - 1]) {
+    case 'jsx':
+    case 'tsx':
+      return <ReactSVG />;
+    case 'js':
+      return <JavaScriptSVG />;
+    case 'ts':
+      return <TypeScriptSVG />;
+    case 'json':
+      return <JsonSVG />;
+    case 'md':
+      return <MarkdownSVG />;
+    case 'html':
+      return <HtmlSVG />;
+    case 'css':
+      return <CssSVG />;
+    case 'svelte':
+      return <SvelteSVG />;
+    default:
+      return <FileSVG />;
+  }
+}
+
+// Various neat icons based on the file extension
+export const FileTypeIcon = ({
+  name,
+}: {
+  name: string;
+}) => (
+  <i className="file-icon">
+    {useMemo(() => getExtensionIcon(name), [name])}
+  </i>
+);