vzcode 2.3.0 → 2.4.0

package/src/client/VZSettings.tsx

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

@@ -0,0 +1,243 @@
+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 === 'Enter' && event.shiftKey) {
+        // Shift+Enter should add a newline, not trigger run code
+        // We prevent the event from bubbling up to the global keyboard handler
+        event.stopPropagation();
+      } 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

@@ -0,0 +1,136 @@
+.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);
+    }
+  }
+}