vzcode 1.44.0 → 1.46.0

package/src/client/VZRight.tsx

@@ -11,6 +11,14 @@ import {
 import BuildWorker from './buildWorker?worker';
 import { VZCodeContext } from './VZCodeContext';
 import { vizFilesToFileCollection } from '@vizhub/viz-utils';
+import { VizContent } from '@vizhub/viz-types';
+
+// Extend VizContent type to include hardRerun property
+type ExtendedVizContent = VizContent & {
+  // TODO remove this, use the runId property from VizContent instead.
+  // If `VizContent.runId` changes, it will trigger a hard rerun.
+  hardRerun?: boolean;
+};
 
 const enableIframe = true;
 
@@ -18,6 +26,9 @@ export const VZRight = () => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const runtimeRef = useRef<VizHubRuntime | null>(null);
   const isFirstRunRef = useRef(true);
+  const lastRunIdRef = useRef<string | undefined>(
+    undefined,
+  );
 
   // Get access to the current files.
   const { content, handleRuntimeError, clearRuntimeError } =
@@ -32,6 +43,15 @@ export const VZRight = () => {
   );
 
   const isInteracting = content?.isInteracting || false;
+  const runId = content?.runId;
+  const hardRerun =
+    (content as ExtendedVizContent)?.hardRerun || false;
+
+  // Check if runId has changed
+  const runIdChanged = runId !== lastRunIdRef.current;
+  if (runIdChanged) {
+    lastRunIdRef.current = runId;
+  }
 
   useEffect(() => {
     if (!files) return;
@@ -51,14 +71,22 @@ export const VZRight = () => {
       });
     }
 
-    // Run code in the iframe
-    if (isFirstRunRef.current || isInteracting) {
+    // Run code in the iframe when:
+    // 1. First run
+    // 2. User is interacting with widgets
+    // 3. runId changed (indicating AI finished or other trigger)
+    if (
+      isFirstRunRef.current ||
+      isInteracting ||
+      runIdChanged
+    ) {
       // Clear runtime errors when new code runs
       clearRuntimeError();
 
       runtimeRef.current?.run({
         files,
-        enableHotReloading: true,
+        // Enable hot reloading when interacting, disable when runId changed without interaction
+        enableHotReloading: isInteracting,
         enableSourcemap: true,
         vizId: 'example-viz',
       });
@@ -70,7 +98,7 @@ export const VZRight = () => {
     //   runtime.cleanup();
     //   worker.terminate();
     // };
-  }, [files, isInteracting]);
+  }, [files, isInteracting, runIdChanged, hardRerun]);
 
   return (
     <div className="right">

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

@@ -4,22 +4,31 @@ import {
   useCallback,
   memo,
 } from 'react';
-import { Form, Button } from '../../bootstrap';
+import {
+  Form,
+  Button,
+  ButtonGroup,
+  ToggleButton,
+} from '../../bootstrap';
 
 interface ChatInputProps {
-  message: string;
-  setMessage: (message: string) => void;
+  aiChatMessage: string;
+  setAIChatMessage: (message: string) => void;
   onSendMessage: () => void;
   isLoading: boolean;
   focused: boolean;
+  aiChatMode: 'ask' | 'edit';
+  setAIChatMode: (mode: 'ask' | 'edit') => void;
 }
 
 const ChatInputComponent = ({
-  message,
-  setMessage,
+  aiChatMessage,
+  setAIChatMessage,
   onSendMessage,
   isLoading,
   focused,
+  aiChatMode,
+  setAIChatMode,
 }: ChatInputProps) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
@@ -42,30 +51,91 @@ const ChatInputComponent = ({
 
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      setMessage(event.target.value);
+      setAIChatMessage(event.target.value);
     },
-    [setMessage],
+    [setAIChatMessage],
   );
 
   return (
     <div className="ai-chat-input-container">
+      <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={2}
-          value={message}
+          value={aiChatMessage}
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           ref={inputRef}
-          placeholder="Describe what you'd like me to change in your code..."
+          placeholder={
+            aiChatMode === 'edit'
+              ? 'Ask me to make code changes...'
+              : 'Ask me anything about your code...'
+          }
           spellCheck="false"
           disabled={isLoading}
+          aria-label="Chat message input"
         />
+        {aiChatMessage && (
+          <div className="ai-chat-input-info">
+            <span className="ai-chat-hint">
+              Shift+Enter for new line
+            </span>
+            <span className="ai-chat-hint">
+              Press Enter to send
+            </span>
+          </div>
+        )}
         <Button
           variant="primary"
           onClick={onSendMessage}
-          disabled={!message.trim() || isLoading}
+          disabled={!aiChatMessage.trim() || isLoading}
           className="ai-chat-send-button"
+          aria-label="Send message"
+          title="Send message (Enter)"
         >
           Send
         </Button>

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

@@ -0,0 +1,154 @@
+.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;
+      }
+    }
+  }
+
+  .undo-button-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+  }
+
+  .undo-button {
+    background-color: #dc3545;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: #c82333;
+    }
+
+    &:disabled {
+      background-color: #6c757d;
+      cursor: not-allowed;
+    }
+  }
+
+  .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;
+    }
+
+    // Fix wrapper border
+    .d2h-file-wrapper {
+      border: 1px solid var(--d2h-border-color) !important;
+      background-color: var(--d2h-bg-color);
+    }
+  }
+}

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

@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import {
+  UnifiedFilesDiff,
+  parseUnifiedDiffStats,
+  combineUnifiedDiffs,
+} from '../../../utils/fileDiff';
+import * as Diff2Html from 'diff2html';
+import 'diff2html/bundles/css/diff2html.min.css';
+import './DiffView.scss';
+
+interface DiffViewProps {
+  diffData: UnifiedFilesDiff;
+  messageId?: string;
+  chatId?: string;
+  beforeFiles?: any;
+  canUndo?: boolean;
+}
+
+export const DiffView: React.FC<DiffViewProps> = ({
+  diffData,
+  messageId,
+  chatId,
+  beforeFiles,
+  canUndo = false,
+}) => {
+  const [isUndoing, setIsUndoing] = useState(false);
+
+  const unifiedDiffs = Object.values(diffData).filter(
+    (diff) => diff.length > 0,
+  );
+
+  if (unifiedDiffs.length === 0) {
+    return null;
+  }
+
+  const handleUndo = async () => {
+    if (
+      !messageId ||
+      !chatId ||
+      !beforeFiles ||
+      isUndoing
+    ) {
+      return;
+    }
+
+    setIsUndoing(true);
+    try {
+      const response = await fetch('/ai-chat-undo', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          chatId,
+          messageId,
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error(
+          `HTTP error! status: ${response.status}`,
+        );
+      }
+
+      // The server will handle the ShareDB operations to undo the changes
+      // The UI will update automatically via ShareDB
+    } catch (error) {
+      console.error('Error undoing AI edit:', error);
+      // TODO: Show user-friendly error message
+    } finally {
+      setIsUndoing(false);
+    }
+  };
+
+  // Calculate statistics from all unified diffs
+  let totalAdditions = 0;
+  let totalDeletions = 0;
+
+  for (const unifiedDiff of unifiedDiffs) {
+    const stats = parseUnifiedDiffStats(unifiedDiff);
+    totalAdditions += stats.additions;
+    totalDeletions += stats.deletions;
+  }
+
+  // Combine all 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',
+  });
+
+  return (
+    <div className="diff-view">
+      <div className="diff-summary">
+        <div className="diff-stats">
+          <span className="files-changed">
+            {unifiedDiffs.length} file
+            {unifiedDiffs.length !== 1 ? 's' : ''} changed
+          </span>
+          {totalAdditions > 0 && (
+            <span className="additions">
+              +{totalAdditions}
+            </span>
+          )}
+          {totalDeletions > 0 && (
+            <span className="deletions">
+              -{totalDeletions}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div
+        className="diff-files"
+        dangerouslySetInnerHTML={{ __html: diffHtml }}
+      />
+      {canUndo && beforeFiles && (
+        <div className="undo-button-container">
+          <button
+            className="undo-button"
+            onClick={handleUndo}
+            disabled={isUndoing}
+            title="Undo this AI edit"
+          >
+            {isUndoing ? 'Undoing...' : 'Undo'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -2,6 +2,9 @@ import { timestampToDate } from '@vizhub/viz-utils';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { useMemo, memo } from 'react';
+import { DiffView } from './DiffView';
+import { UnifiedFilesDiff } from '../../../utils/fileDiff';
+import { enableDiffView } from '../../featureFlags';
 
 interface MessageProps {
   id: string;
@@ -9,13 +12,22 @@ interface MessageProps {
   content: string;
   timestamp: number;
   isStreaming?: boolean;
+  diffData?: UnifiedFilesDiff;
+  beforeFiles?: any;
+  chatId?: string;
+  canUndo?: boolean;
 }
 
 const MessageComponent = ({
+  id,
   role,
   content,
   timestamp,
   isStreaming,
+  diffData,
+  beforeFiles,
+  chatId,
+  canUndo,
 }: MessageProps) => {
   // Memoize date formatting to avoid repeated computation
   const formattedTime = useMemo(() => {
@@ -32,12 +44,24 @@ const MessageComponent = ({
   const messageClassName = useMemo(() => {
     return `ai-chat-message ${role}${isStreaming ? ' streaming' : ''}`;
   }, [role, isStreaming]);
+
   return (
     <div className={messageClassName}>
       <div className="ai-chat-message-content">
         <Markdown remarkPlugins={[remarkGfm]}>
           {content}
         </Markdown>
+        {enableDiffView &&
+          diffData &&
+          Object.keys(diffData).length > 0 && (
+            <DiffView
+              diffData={diffData}
+              messageId={id}
+              chatId={chatId}
+              beforeFiles={beforeFiles}
+              canUndo={canUndo}
+            />
+          )}
       </div>
       <div className="ai-chat-message-time">
         {formattedTime}