vzcode 2.21.0 → 2.22.0

package/src/llm-streaming-ui/components/ChatInput.tsx

@@ -0,0 +1,237 @@
+import {
+  useRef,
+  useEffect,
+  useCallback,
+  memo,
+} from 'react';
+import {
+  Form,
+  Button,
+  ButtonGroup,
+  ToggleButton,
+} from '../../client/bootstrap';
+import { enableAskMode } from '../../client/featureFlags';
+import { useSpeechRecognition } from './useSpeechRecognition';
+import { MicSVG, MicOffSVG } from '../../client/Icons';
+
+interface ChatInputProps {
+  aiChatMessage: string;
+  setAIChatMessage: (message: string) => void;
+  onSendMessage: () => void;
+  focused: boolean;
+  aiChatMode: 'ask' | 'edit';
+  setAIChatMode: (mode: 'ask' | 'edit') => void;
+  navigateMessageHistoryUp: () => void;
+  navigateMessageHistoryDown: () => void;
+  resetMessageHistoryNavigation: () => void;
+}
+
+const ChatInputComponent = ({
+  aiChatMessage,
+  setAIChatMessage,
+  onSendMessage,
+  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')}
+            >
+              💬 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')}
+            >
+              ✏️ 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={10}
+          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"
+          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}
+              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()}
+              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/llm-streaming-ui/components/DiffView.scss

@@ -0,0 +1,173 @@
+.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: 14px;
+      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 {
+      display: none !important;
+      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);
+    }
+  }
+
+  .deleted-file {
+    margin-bottom: 8px;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    background-color: rgb(41, 44, 52);
+    overflow: hidden;
+
+    .deleted-file-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 16px;
+      background-color: #161b22;
+      border-bottom: 1px solid #30363d;
+
+      .deleted-file-name {
+        color: #e6edf3;
+        font-weight: 600;
+        font-family:
+          'SFMono-Regular', Consolas, 'Liberation Mono',
+          Menlo, monospace;
+        font-size: 14px;
+      }
+
+      .deleted-file-status {
+        color: #f85149;
+        font-weight: 600;
+        font-size: 14px;
+        background-color: rgba(248, 81, 73, 0.1);
+        padding: 4px 8px;
+        border-radius: 4px;
+        border: 1px solid rgba(248, 81, 73, 0.4);
+      }
+    }
+  }
+}

package/src/llm-streaming-ui/components/DiffView.tsx

@@ -0,0 +1,236 @@
+import React, {
+  useContext,
+  useEffect,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import {
+  UnifiedFilesDiff,
+  parseUnifiedDiffStats,
+  combineUnifiedDiffs,
+  isFileDeletion,
+  getDeletedFileName,
+} from '../../utils/fileDiff';
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
+import './DiffView.scss';
+import { VZCodeContext } from '../../client/VZCodeContext';
+import {
+  scrollToFirstDiff,
+  getHeaderOffset,
+  announceDiffSummary,
+} from '../../client/utils/scrollUtils';
+import { getFileId } from '@vizhub/viz-utils';
+
+interface DiffViewProps {
+  diffData: UnifiedFilesDiff;
+}
+
+// Methods that can be called on DiffView from parent components
+export interface DiffViewRef {
+  scrollToFirstHunk: () => void;
+  focusDiffContainer: () => void;
+  announceSummary: () => void;
+  getFirstHunkElement: () => HTMLElement | null;
+}
+
+export const DiffView = forwardRef<
+  DiffViewRef,
+  DiffViewProps
+>(({ diffData }, ref) => {
+  const { content, openTab, setIsAIChatOpen } =
+    useContext(VZCodeContext);
+  const diffContainerRef = useRef<HTMLDivElement>(null);
+
+  const allDiffs = Object.values(diffData).filter(
+    (diff) => diff.length > 0,
+  );
+
+  // Separate deleted files from regular diffs
+  const deletedFiles: string[] = [];
+  const regularDiffs: string[] = [];
+
+  for (const diff of allDiffs) {
+    if (isFileDeletion(diff)) {
+      deletedFiles.push(diff);
+    } else {
+      regularDiffs.push(diff);
+    }
+  }
+
+  // Calculate statistics from regular unified diffs only
+  let totalAdditions = 0;
+  let totalDeletions = 0;
+
+  for (const unifiedDiff of regularDiffs) {
+    const stats = parseUnifiedDiffStats(unifiedDiff);
+    totalAdditions += stats.additions;
+    totalDeletions += stats.deletions;
+  }
+
+  // Combine regular unified diffs and convert to HTML using diff2html
+  const combinedUnifiedDiff = combineUnifiedDiffs(diffData);
+  const diffHtml = Diff2Html.html(combinedUnifiedDiff, {
+    drawFileList: false,
+    matching: 'words',
+    diffStyle: 'word',
+    outputFormat: 'line-by-line',
+  });
+
+  // Expose methods for parent components to control scrolling and focus
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToFirstHunk: () => {
+        if (diffContainerRef.current) {
+          const headerOffset = getHeaderOffset();
+          scrollToFirstDiff(
+            diffContainerRef.current,
+            headerOffset,
+          );
+        }
+      },
+      focusDiffContainer: () => {
+        if (diffContainerRef.current) {
+          diffContainerRef.current.tabIndex = -1;
+          diffContainerRef.current.focus();
+        }
+      },
+      announceSummary: () => {
+        if (diffContainerRef.current) {
+          announceDiffSummary(diffContainerRef.current);
+        }
+      },
+      getFirstHunkElement: () => {
+        if (diffContainerRef.current) {
+          return diffContainerRef.current.querySelector(
+            '.d2h-diff-tbody tr',
+          );
+        }
+        return null;
+      },
+    }),
+    [],
+  );
+
+  // Add click handlers to file names after HTML is rendered
+  useEffect(() => {
+    if (!diffContainerRef.current) return;
+
+    const handleFileNameClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.classList.contains('d2h-file-name')) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        console.log('File name clicked');
+
+        const fileName = target.textContent?.trim();
+
+        console.log('Clicked file name:', fileName);
+        if (fileName && content) {
+          const fileId = getFileId(content, fileName);
+
+          if (fileId) {
+            // Open the file tab and switch to files view
+            openTab({ fileId, isTransient: false });
+            setIsAIChatOpen(false);
+          }
+        }
+      }
+    };
+
+    const container = diffContainerRef.current;
+    const fileNameElements = container.querySelectorAll(
+      '.d2h-file-name',
+    );
+
+    // Add click event listeners and cursor pointer style
+    fileNameElements.forEach((element) => {
+      element.addEventListener(
+        'click',
+        handleFileNameClick,
+      );
+      (element as HTMLElement).style.cursor = 'pointer';
+      (element as HTMLElement).style.textDecoration =
+        'underline';
+      (element as HTMLElement).style.color = '#58a6ff'; // GitHub blue link color
+    });
+
+    return () => {
+      // Cleanup event listeners
+      fileNameElements.forEach((element) => {
+        element.removeEventListener(
+          'click',
+          handleFileNameClick,
+        );
+      });
+    };
+  }, [diffHtml, content, openTab, setIsAIChatOpen]);
+
+  if (allDiffs.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="diff-view">
+      <div className="diff-summary" id="diff-summary">
+        <div className="diff-stats">
+          <span className="files-changed">
+            {allDiffs.length} file
+            {allDiffs.length !== 1 ? 's' : ''} changed
+          </span>
+          {totalAdditions > 0 && (
+            <span className="additions">
+              +{totalAdditions}
+            </span>
+          )}
+          {totalDeletions > 0 && (
+            <span className="deletions">
+              -{totalDeletions}
+            </span>
+          )}
+          {deletedFiles.length > 0 && (
+            <span className="deletions">
+              {deletedFiles.length} deleted
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Render deleted files */}
+      {deletedFiles.map((deletionMarker, index) => {
+        const fileName = getDeletedFileName(deletionMarker);
+        return (
+          <div key={index} className="deleted-file">
+            <div className="deleted-file-header">
+              <span className="deleted-file-name">
+                {fileName}
+              </span>
+              <span className="deleted-file-status">
+                File deleted
+              </span>
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Render regular diffs */}
+      {regularDiffs.length > 0 && (
+        <div
+          className="diff-files"
+          ref={diffContainerRef}
+          tabIndex={-1}
+          role="region"
+          aria-label="Code diff content"
+          aria-describedby="diff-summary"
+          dangerouslySetInnerHTML={{ __html: diffHtml }}
+        />
+      )}
+    </div>
+  );
+});
+
+// Add display name for debugging
+DiffView.displayName = 'DiffView';