vzcode 2.22.0 → 2.26.0

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

@@ -1,236 +0,0 @@
-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 '../../VZCodeContext';
-import {
-  scrollToFirstDiff,
-  getHeaderOffset,
-  announceDiffSummary,
-} from '../../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';

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

@@ -1,89 +0,0 @@
-import { Spinner } from '../../AIAssist/Spinner';
-
-interface AIEditingStatusIndicatorProps {
-  status: string;
-  fileName?: string;
-  additionalWidgets?: React.ReactNode;
-}
-
-export const AIEditingStatusIndicator: React.FC<
-  AIEditingStatusIndicatorProps
-> = ({ status, fileName, additionalWidgets }) => {
-  const getStatusDisplay = (status: string) => {
-    switch (status) {
-      case 'Analyzing request...':
-        return (
-          <>
-            🔍 <span>Analyzing request...</span>
-          </>
-        );
-      case 'Formulating a plan...':
-        return (
-          <>
-            💭 <span>Formulating a plan...</span>
-          </>
-        );
-      case 'Describing changes...':
-        return (
-          <>
-            📝 <span>Describing changes...</span>
-          </>
-        );
-      case 'Thinking...':
-        return (
-          <>
-            🤔 <span>Thinking...</span>
-          </>
-        );
-      case 'Done':
-        return (
-          <div className="file-editing-done-container">
-            <div className="file-editing-done-status">
-              ✅ <span>Done</span>
-            </div>
-            {additionalWidgets && (
-              <div className="file-editing-done-widgets">
-                {additionalWidgets}
-              </div>
-            )}
-          </div>
-        );
-      default:
-        // Handle file editing status (e.g., "Editing filename.js...")
-        if (status.startsWith('Editing ') && fileName) {
-          return (
-            <>
-              ✏️{' '}
-              <span>
-                Editing <code>{fileName}</code>...
-              </span>
-            </>
-          );
-        } else if (status.startsWith('Editing ')) {
-          return (
-            <>
-              ✏️ <span>{status}</span>
-            </>
-          );
-        }
-        return <span>{status}</span>;
-    }
-  };
-
-  const showSpinner = status !== 'Done';
-
-  return (
-    <div className="file-editing-indicator">
-      <div className="file-editing-header">
-        {showSpinner && (
-          <div className="file-editing-icon">
-            <Spinner height={16} fadeIn={false} />
-          </div>
-        )}
-        <div className="file-editing-text">
-          {getStatusDisplay(status)}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,86 +0,0 @@
-import React, { useMemo } from 'react';
-import * as Diff2Html from 'diff2html';
-import 'diff2html/bundles/css/diff2html.min.css';
-import './DiffView.scss';
-import { generateFileUnifiedDiff } from '../../../utils/fileDiff';
-
-interface IndividualFileDiffProps {
-  fileName: string;
-  beforeContent: string;
-  afterContent: string;
-}
-
-export const IndividualFileDiff: React.FC<
-  IndividualFileDiffProps
-> = ({ fileName, beforeContent, afterContent }) => {
-  // Generate unified diff for this single file
-  const unifiedDiff = useMemo(() => {
-    return generateFileUnifiedDiff(
-      'temp-id',
-      fileName,
-      beforeContent,
-      afterContent,
-    );
-  }, [fileName, beforeContent, afterContent]);
-
-  // Convert to HTML using diff2html
-  const diffHtml = useMemo(() => {
-    if (!unifiedDiff) return '';
-
-    return Diff2Html.html(unifiedDiff, {
-      drawFileList: false,
-      matching: 'words',
-      diffStyle: 'word',
-      outputFormat: 'line-by-line',
-    });
-  }, [unifiedDiff]);
-
-  // Calculate simple stats
-  const stats = useMemo(() => {
-    const lines = unifiedDiff.split('\n');
-    let additions = 0;
-    let deletions = 0;
-
-    lines.forEach((line) => {
-      if (line.startsWith('+') && !line.startsWith('+++')) {
-        additions++;
-      } else if (
-        line.startsWith('-') &&
-        !line.startsWith('---')
-      ) {
-        deletions++;
-      }
-    });
-
-    return { additions, deletions };
-  }, [unifiedDiff]);
-
-  if (!unifiedDiff) {
-    return null;
-  }
-
-  return (
-    <div className="diff-view" data-file={fileName}>
-      <div className="diff-summary">
-        <div className="diff-stats">
-          <span className="files-changed">{fileName}</span>
-          {stats.additions > 0 && (
-            <span className="additions">
-              +{stats.additions}
-            </span>
-          )}
-          {stats.deletions > 0 && (
-            <span className="deletions">
-              -{stats.deletions}
-            </span>
-          )}
-        </div>
-      </div>
-
-      <div
-        className="diff-files"
-        dangerouslySetInnerHTML={{ __html: diffHtml }}
-      />
-    </div>
-  );
-};

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

@@ -1,64 +0,0 @@
-import React, { useCallback } from 'react';
-
-/**
- * Props for the JumpToLatestButton component
- */
-interface JumpToLatestButtonProps {
-  /** Whether the button is visible */
-  visible: boolean;
-  /** Callback when button is clicked */
-  onClick: () => void;
-  /** Additional CSS class name */
-  className?: string;
-}
-
-/**
- * Circular "down arrow" button that floats at the bottom center of scroll area
- * Appears when auto-scroll is disabled and user is not at bottom
- */
-export const JumpToLatestButton: React.FC<
-  JumpToLatestButtonProps
-> = ({ visible, onClick, className = '' }) => {
-  /**
-   * Handle button click
-   */
-  const handleClick = useCallback(() => {
-    onClick();
-  }, [onClick]);
-
-  /**
-   * Handle keyboard events for accessibility
-   */
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      if (event.key === 'Enter' || event.key === ' ') {
-        event.preventDefault();
-        onClick();
-      }
-    },
-    [onClick],
-  );
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <button
-      className={`jump-to-latest-button ${className}`.trim()}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
-      aria-label="Jump to latest"
-      tabIndex={0}
-      type="button"
-    >
-      {/* Down arrow icon using Unicode or can be replaced with SVG */}
-      <span
-        className="jump-to-latest-icon"
-        aria-hidden="true"
-      >
-        ▼
-      </span>
-    </button>
-  );
-};

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

@@ -1,145 +0,0 @@
-import React, {
-  useMemo,
-  useContext,
-  forwardRef,
-} from 'react';
-import { timestampToDate } from '@vizhub/viz-utils';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import { StreamingEvent } from '../../../types.js';
-import { IndividualFileDiff } from './IndividualFileDiff';
-import { VZCodeContext } from '../../VZCodeContext';
-import { DiffView, DiffViewRef } from './DiffView';
-import { UnifiedFilesDiff } from '../../../utils/fileDiff';
-import { enableDiffView } from '../../featureFlags';
-
-const DEBUG = false;
-
-interface MessageProps {
-  id: string;
-  role: 'user' | 'assistant';
-  content?: string; // For non-streaming messages
-  timestamp: number;
-  events?: StreamingEvent[]; // For streaming messages
-  isActive?: boolean; // Is this the currently streaming message?
-  chatId?: string;
-  showAdditionalWidgets?: boolean;
-  isStreaming?: boolean;
-  diffData?: UnifiedFilesDiff;
-}
-
-export const Message = forwardRef<
-  DiffViewRef,
-  React.PropsWithChildren<MessageProps>
->(
-  (
-    {
-      id,
-      role,
-      content,
-      timestamp,
-      events = [],
-      isActive,
-      children,
-      chatId,
-      showAdditionalWidgets = false,
-      isStreaming = false,
-      diffData,
-    },
-    ref,
-  ) => {
-    const { additionalWidgets, handleSendMessage } =
-      useContext(VZCodeContext);
-
-    DEBUG &&
-      console.log(
-        'StreamingMessage: Rendered with events:',
-        events,
-      );
-
-    // Memoize date formatting to avoid repeated computation
-    const formattedTime = useMemo(() => {
-      return timestampToDate(timestamp).toLocaleTimeString(
-        [],
-        {
-          hour: '2-digit',
-          minute: '2-digit',
-        },
-      );
-    }, [timestamp]);
-
-    // Memoize the className string to avoid recreation
-    const messageClassName = useMemo(() => {
-      return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
-    }, [role, isStreaming]);
-
-    return (
-      <div className={messageClassName}>
-        <div className="ai-chat-message-content">
-          {/* Render regular content for non-streaming messages */}
-          {content && (
-            <Markdown remarkPlugins={[remarkGfm]}>
-              {content}
-            </Markdown>
-          )}
-
-          {/* Render diff view if present */}
-          {enableDiffView &&
-            diffData &&
-            Object.keys(diffData).length > 0 && (
-              <DiffView diffData={diffData} ref={ref} />
-            )}
-
-          {/* Render events in order for streaming messages */}
-          {events.map((event, index) => {
-            switch (event.type) {
-              case 'text_chunk':
-                return (
-                  <div
-                    key={`text-${index}`}
-                    className="text-chunk"
-                  >
-                    <Markdown remarkPlugins={[remarkGfm]}>
-                      {event.content}
-                    </Markdown>
-                  </div>
-                );
-              case 'file_complete':
-                return (
-                  <IndividualFileDiff
-                    key={`file-${event.fileName}-${index}`}
-                    fileName={event.fileName}
-                    beforeContent={
-                      event.beforeContent || ''
-                    }
-                    afterContent={event.afterContent || ''}
-                  />
-                );
-              case 'file_start':
-                // File start events are now handled by centralized status logic in MessageList
-                return null;
-              default:
-                return null;
-            }
-          })}
-          {/* Additional widgets are now shown within the "Done" status indicator */}
-          {showAdditionalWidgets &&
-            additionalWidgets &&
-            chatId &&
-            !isStreaming && // Only show here for non-streaming messages (completed messages)
-            additionalWidgets({
-              messageId: id,
-              chatId: chatId,
-              handleSendMessage,
-            })}
-          {isActive && children}
-        </div>
-        <div className="ai-chat-message-time">
-          {formattedTime}
-        </div>
-      </div>
-    );
-  },
-);
-
-Message.displayName = 'Message';