vzcode 2.2.0 → 2.3.0

package/src/client/VZSettings.tsx

@@ -1,275 +0,0 @@
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { Button, Modal, Form } from './bootstrap';
-import { ThemeLabel, themes } from './themes';
-import { VZCodeContext } from './VZCodeContext';
-
-const DEBUG = false;
-
-// Font size options for the editor
-const fontSizes = [
-  '10px',
-  '12px',
-  '14px',
-  '16px',
-  '18px',
-  '20px',
-  '24px',
-];
-
-// List of system fonts to be detected for availability
-const systemFonts = [
-  '-apple-system',
-  'BlinkMacSystemFont',
-  'Segoe UI',
-  'Roboto',
-  'Helvetica Neue',
-  'Arial',
-  'sans-serif',
-  'Courier New',
-  'Georgia',
-  'Tahoma',
-  'Verdana',
-  'Times New Roman',
-  'Trebuchet MS',
-  'Comic Sans MS',
-];
-
-// Utility function to detect if a given font is available
-const isFontAvailable = (font: string): boolean => {
-  const testString = 'abcdefghijklmnopqrstuvwxyz0123456789';
-  const testSize = '72px';
-
-  const span = document.createElement('span');
-  span.style.fontSize = testSize;
-  span.style.visibility = 'hidden';
-  span.style.position = 'absolute';
-  span.innerHTML = testString;
-  document.body.appendChild(span);
-
-  const defaultFont = 'monospace';
-  span.style.fontFamily = defaultFont;
-  const defaultWidth = span.offsetWidth;
-
-  span.style.fontFamily = `${font}, ${defaultFont}`;
-  const newWidth = span.offsetWidth;
-
-  document.body.removeChild(span);
-
-  return newWidth !== defaultWidth;
-};
-
-export const VZSettings = ({
-  enableUsernameField = true,
-}: {
-  enableUsernameField?: boolean;
-}) => {
-  // Extracting context values for managing settings state
-  const {
-    isSettingsOpen,
-    closeSettings,
-    theme,
-    setTheme,
-    username,
-    setUsername,
-  } = useContext(VZCodeContext);
-
-  // State variables for managing font and font size
-  const [selectedFont, setSelectedFont] =
-    useState('Roboto Mono');
-  const [selectedFontSize, setSelectedFontSize] =
-    useState('16px');
-  const [availableFonts, setAvailableFonts] = useState<
-    string[]
-  >([]);
-
-  // Load saved settings from local storage on initial render
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const selectedFontFromLocalStorage =
-        window.localStorage.getItem('vzcodeSelectedFont');
-      const selectedFontSizeFromLocalStorage =
-        window.localStorage.getItem(
-          'vzcodeSelectedFontSize',
-        );
-
-      if (selectedFontFromLocalStorage !== null) {
-        setSelectedFont(selectedFontFromLocalStorage);
-      }
-      if (selectedFontSizeFromLocalStorage !== null) {
-        setSelectedFontSize(
-          selectedFontSizeFromLocalStorage,
-        );
-      }
-    }
-  }, []);
-
-  // Detect available system fonts and update the state
-  useEffect(() => {
-    const detectFonts = () => {
-      const detectedFonts: string[] = [];
-      for (const font of systemFonts) {
-        if (isFontAvailable(font)) {
-          detectedFonts.push(font);
-          if (DEBUG) {
-            console.log(`${font} is available`);
-          }
-        } else if (DEBUG) {
-          console.log(`${font} is not available`);
-        }
-      }
-      setAvailableFonts(detectedFonts);
-    };
-
-    detectFonts();
-  }, []);
-
-  // Reset all settings to default values
-  const resetSettings = useCallback(() => {
-    setSelectedFont('Roboto Mono');
-    setSelectedFontSize('16px');
-    setTheme(themes[0].label);
-    if (enableUsernameField) {
-      setUsername('');
-    }
-    localStorage.removeItem('vzcodeSelectedFont');
-    localStorage.removeItem('vzcodeSelectedFontSize');
-  }, [enableUsernameField, setTheme, setUsername]);
-
-  // Update font family in the document's style
-  useEffect(() => {
-    document.body.style.setProperty(
-      '--vzcode-font-family',
-      selectedFont,
-    );
-  }, [selectedFont]);
-
-  // Update font size in the document's style
-  useEffect(() => {
-    document.body.style.setProperty(
-      '--vzcode-font-size',
-      selectedFontSize,
-    );
-  }, [selectedFontSize]);
-
-  const usernameRef = useRef<HTMLInputElement>(null);
-
-  // Handle username input change
-  const handleUsernameChange = useCallback(() => {
-    setUsername(usernameRef.current?.value || '');
-  }, [setUsername]);
-
-  // Close settings modal on Enter key press
-  useEffect(() => {
-    if (isSettingsOpen) {
-      const handleEnterKey = (event: KeyboardEvent) => {
-        if (event.key === 'Enter') {
-          closeSettings();
-        }
-      };
-
-      window.addEventListener('keydown', handleEnterKey);
-      return () => {
-        window.removeEventListener(
-          'keydown',
-          handleEnterKey,
-        );
-      };
-    }
-  }, [isSettingsOpen, closeSettings]);
-
-  return isSettingsOpen ? (
-    <Modal
-      className="vz-settings"
-      show={isSettingsOpen}
-      onHide={closeSettings}
-      animation={false}
-    >
-      <Modal.Header closeButton>
-        <Modal.Title>Editor Settings</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        {enableUsernameField ? (
-          <Form.Group className="mb-3" controlId="formFork">
-            <Form.Label>Username</Form.Label>
-            <Form.Control
-              type="text"
-              ref={usernameRef}
-              onChange={handleUsernameChange}
-              placeholder="Enter username"
-              value={username}
-            />
-            <Form.Text className="text-muted">
-              Enter a username to be displayed on your
-              cursor
-            </Form.Text>
-          </Form.Group>
-        ) : null}
-
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Theme</Form.Label>
-          <select
-            className="form-select"
-            value={theme}
-            onChange={(e) =>
-              setTheme(e.target.value as ThemeLabel)
-            }
-          >
-            {themes.map(({ label }) => (
-              <option key={label} value={label}>
-                {label}
-              </option>
-            ))}
-          </select>
-        </Form.Group>
-
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Font</Form.Label>
-          <select
-            className="form-select"
-            onChange={(e) =>
-              setSelectedFont(e.target.value)
-            }
-            value={selectedFont}
-          >
-            {availableFonts.map((font) => (
-              <option key={font} value={font}>
-                {font}
-              </option>
-            ))}
-          </select>
-        </Form.Group>
-
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Font Size</Form.Label>
-          <select
-            className="form-select"
-            onChange={(e) =>
-              setSelectedFontSize(e.target.value)
-            }
-            value={selectedFontSize}
-          >
-            {fontSizes.map((size) => (
-              <option key={size} value={size}>
-                {size}
-              </option>
-            ))}
-          </select>
-        </Form.Group>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button variant="secondary" onClick={resetSettings}>
-          Reset to Default
-        </Button>
-        <Button variant="primary" onClick={closeSettings}>
-          Done
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  ) : null;
-};

package/src/client/VZSidebar/AIChat/ChatInput.tsx

@@ -1,239 +0,0 @@
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  memo,
-} from 'react';
-import {
-  Form,
-  Button,
-  ButtonGroup,
-  ToggleButton,
-} from '../../bootstrap';
-import { enableAskMode } from '../../featureFlags';
-import { useSpeechRecognition } from './useSpeechRecognition';
-import { MicSVG, MicOffSVG } from '../../Icons';
-
-interface ChatInputProps {
-  aiChatMessage: string;
-  setAIChatMessage: (message: string) => void;
-  onSendMessage: () => void;
-  isLoading: boolean;
-  focused: boolean;
-  aiChatMode: 'ask' | 'edit';
-  setAIChatMode: (mode: 'ask' | 'edit') => void;
-  navigateMessageHistoryUp: () => void;
-  navigateMessageHistoryDown: () => void;
-  resetMessageHistoryNavigation: () => void;
-}
-
-const ChatInputComponent = ({
-  aiChatMessage,
-  setAIChatMessage,
-  onSendMessage,
-  isLoading,
-  focused,
-  aiChatMode,
-  setAIChatMode,
-  navigateMessageHistoryUp,
-  navigateMessageHistoryDown,
-  resetMessageHistoryNavigation,
-}: 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) {
-      inputRef.current.focus();
-    }
-  }, [focused]);
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key === 'Enter' && !event.shiftKey) {
-        event.preventDefault();
-        onSendMessage();
-      } else if (event.key === 'ArrowUp') {
-        // Only navigate history if cursor is at the beginning of the first line
-        const textarea =
-          event.target as HTMLTextAreaElement;
-        const { selectionStart, value } = textarea;
-        const lines = value
-          .substring(0, selectionStart)
-          .split('\n');
-
-        // Check if we're at the beginning of the first line
-        if (lines.length === 1 && selectionStart === 0) {
-          event.preventDefault();
-          navigateMessageHistoryUp();
-        }
-      } else if (event.key === 'ArrowDown') {
-        // Only navigate history if cursor is at the end of the last line
-        const textarea =
-          event.target as HTMLTextAreaElement;
-        const { selectionStart, value } = textarea;
-        const remainingText =
-          value.substring(selectionStart);
-        const remainingLines = remainingText.split('\n');
-
-        // Check if we're at the end of the last line
-        if (
-          remainingLines.length === 1 &&
-          remainingLines[0] === ''
-        ) {
-          event.preventDefault();
-          navigateMessageHistoryDown();
-        }
-      }
-    },
-    [
-      onSendMessage,
-      navigateMessageHistoryUp,
-      navigateMessageHistoryDown,
-    ],
-  );
-
-  const handleSendClick = useCallback(() => {
-    // If speech recognition is active, stop it
-    if (isSpeaking) {
-      stopSpeaking();
-    }
-    onSendMessage();
-  }, [onSendMessage, isSpeaking, stopSpeaking]);
-
-  const handleChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setAIChatMessage(event.target.value);
-      // Reset history navigation when user starts typing
-      resetMessageHistoryNavigation();
-    },
-    [setAIChatMessage, resetMessageHistoryNavigation],
-  );
-
-  return (
-    <div className="ai-chat-input-container">
-      {enableAskMode && (
-        <div
-          className="ai-chat-mode-toggle"
-          style={{ marginBottom: '8px' }}
-        >
-          <ButtonGroup size="sm">
-            <ToggleButton
-              id="ai-chat-mode-ask"
-              type="radio"
-              variant={
-                aiChatMode === 'ask'
-                  ? 'primary'
-                  : 'outline-primary'
-              }
-              name="ai-chat-mode"
-              value="ask"
-              checked={aiChatMode === 'ask'}
-              onChange={() => setAIChatMode('ask')}
-              disabled={isLoading}
-            >
-              💬 Ask
-            </ToggleButton>
-            <ToggleButton
-              id="ai-chat-mode-edit"
-              type="radio"
-              variant={
-                aiChatMode === 'edit'
-                  ? 'primary'
-                  : 'outline-primary'
-              }
-              name="ai-chat-mode"
-              value="edit"
-              checked={aiChatMode === 'edit'}
-              onChange={() => setAIChatMode('edit')}
-              disabled={isLoading}
-            >
-              ✏️ Edit
-            </ToggleButton>
-          </ButtonGroup>
-          <div className="ai-chat-mode-description">
-            {aiChatMode === 'ask'
-              ? 'Ask questions without editing files'
-              : 'Get answers and code edits'}
-          </div>
-        </div>
-      )}
-      <Form.Group className="ai-chat-input-group">
-        <Form.Control
-          as="textarea"
-          rows={5}
-          value={aiChatMessage}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          ref={inputRef}
-          placeholder={
-            aiChatMode === 'edit'
-              ? 'Ask me to make code changes...'
-              : 'Ask me anything about your code...'
-          }
-          spellCheck="false"
-          disabled={isLoading}
-          aria-label="Chat message input"
-        />
-        <div className="ai-chat-input-footer">
-          <span className="ai-chat-hint">
-            {aiChatMessage ? 'Press Enter to send' : ''}
-          </span>
-          <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>
-  );
-};
-
-export const ChatInput = memo(ChatInputComponent);

package/src/client/VZSidebar/AIChat/DiffView.scss

@@ -1,136 +0,0 @@
-.diff-view {
-  margin: 12px 0;
-
-  .diff-summary {
-    margin-bottom: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .diff-stats {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: var(--bs-secondary-color);
-
-      .files-changed {
-        color: white;
-        font-weight: 600;
-      }
-
-      .additions {
-        color: #28a745;
-        font-weight: 600;
-      }
-
-      .deletions {
-        color: #dc3545;
-        font-weight: 600;
-      }
-    }
-  }
-
-  .diff-files {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-
-    // Fix diff2html styling issues for dark theme and layout
-    .d2h-wrapper {
-      // Override diff2html variables for dark theme
-      --d2h-bg-color: rgb(41, 44, 52);
-      --d2h-color: #e6edf3;
-      --d2h-border-color: #30363d;
-      --d2h-dim-color: #6e7681;
-      --d2h-info-bg-color: #161b22;
-      --d2h-file-header-bg-color: #161b22;
-      --d2h-file-header-border-color: #30363d;
-      --d2h-line-border-color: #21262d;
-      --d2h-ins-bg-color: rgba(46, 160, 67, 0.15);
-      --d2h-ins-border-color: rgba(46, 160, 67, 0.4);
-      --d2h-ins-highlight-bg-color: rgba(46, 160, 67, 0.4);
-      --d2h-ins-label-color: #3fb950;
-      --d2h-del-bg-color: rgba(248, 81, 73, 0.1);
-      --d2h-del-border-color: rgba(248, 81, 73, 0.4);
-      --d2h-del-highlight-bg-color: rgba(248, 81, 73, 0.4);
-      --d2h-del-label-color: #f85149;
-
-      background-color: var(--d2h-bg-color);
-      color: var(--d2h-color);
-      border-radius: 6px;
-      overflow: hidden;
-    }
-
-    // Fix layout issues with line numbers
-    .d2h-diff-table {
-      position: relative;
-      background-color: var(--d2h-bg-color);
-    }
-
-    .d2h-code-linenumber {
-      position: relative !important;
-      float: none !important;
-      display: table-cell !important;
-      width: auto !important;
-      background-color: var(--d2h-bg-color) !important;
-      border-color: var(--d2h-line-border-color) !important;
-      color: var(--d2h-dim-color) !important;
-    }
-
-    .d2h-code-side-linenumber {
-      position: relative !important;
-      float: none !important;
-      display: table-cell !important;
-      width: auto !important;
-      background-color: var(--d2h-bg-color) !important;
-      border-color: var(--d2h-line-border-color) !important;
-      color: var(--d2h-dim-color) !important;
-    }
-
-    // Ensure proper table layout
-    .d2h-diff-tbody tr {
-      display: table-row;
-    }
-
-    .d2h-diff-tbody td {
-      display: table-cell;
-      vertical-align: top;
-    }
-
-    // Fix file header styling
-    .d2h-file-header {
-      background-color: var(
-        --d2h-file-header-bg-color
-      ) !important;
-      border-bottom: 1px solid
-        var(--d2h-file-header-border-color) !important;
-      color: var(--d2h-color);
-    }
-
-    // Ensure proper line styling
-    .d2h-del {
-      background-color: var(--d2h-del-bg-color) !important;
-      border-color: var(--d2h-del-border-color) !important;
-    }
-
-    .d2h-ins {
-      background-color: var(--d2h-ins-bg-color) !important;
-      border-color: var(--d2h-ins-border-color) !important;
-    }
-
-    // Style clickable file names
-    .d2h-file-name {
-      &:hover {
-        text-decoration: underline !important;
-        opacity: 0.8;
-      }
-    }
-
-    // Fix wrapper border
-    .d2h-file-wrapper {
-      border: 1px solid var(--d2h-border-color) !important;
-      background-color: var(--d2h-bg-color);
-    }
-  }
-}