npm - vzcode - Versions diffs - 2.16.0 → 2.17.0 - Mend

vzcode 2.16.0 → 2.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/assets/{bindings_wasm_bg-9w8E-TmY.wasm → bindings_wasm_bg-D9vNLG9F.wasm} +0 -0
package/dist/assets/buildWorker-DL4wXpRr.js +695 -0
package/dist/assets/{index-C2BLPyQP.js → index-BiPmUreW.js} +147 -147
package/dist/assets/{index-DVR90LwF.css → index-BvGPtSrr.css} +1 -1
package/dist/assets/worker-RJ-cjbld.js +327 -0
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/client/VZSidebar/AIChat/FileEditingIndicator.tsx +12 -4
package/src/client/VZSidebar/AIChat/Message.tsx +71 -18
package/src/client/VZSidebar/AIChat/MessageList.tsx +57 -37
package/src/client/VZSidebar/AIChat/index.tsx +0 -3
package/src/client/VZSidebar/AIChat/styles.scss +33 -29
package/src/client/hooks/useAutoScroll.ts +0 -1
package/dist/assets/buildWorker-Bi6wsfQk.js +0 -695
package/dist/assets/worker-BSzbM0Uo.js +0 -330
package/src/client/VZSidebar/AIChat/StreamingMessage.tsx +0 -77

package/dist/index.html CHANGED Viewed

@@ -20,8 +20,8 @@
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-C2BLPyQP.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DVR90LwF.css">
+    <script type="module" crossorigin src="/assets/index-BiPmUreW.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BvGPtSrr.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "vzcode",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Multiplayer code editor system",
   "main": "src/index.ts",
   "type": "module",

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

@@ -3,11 +3,12 @@ import { Spinner } from '../../AIAssist/Spinner';
 interface AIEditingStatusIndicatorProps {
   status: string;
   fileName?: string;
+  additionalWidgets?: React.ReactNode;
 }
 export const AIEditingStatusIndicator: React.FC<
   AIEditingStatusIndicatorProps
-> = ({ status, fileName }) => {
+> = ({ status, fileName, additionalWidgets }) => {
   const getStatusDisplay = (status: string) => {
     switch (status) {
       case 'Analyzing request...':
@@ -36,9 +37,16 @@ export const AIEditingStatusIndicator: React.FC<
         );
       case 'Done':
         return (
-          <>
-            ✅ <span>Done</span>
-          </>
+          <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...")

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

@@ -1,31 +1,36 @@
-import { timestampToDate } from '@vizhub/viz-utils';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 import React, {
   useMemo,
-  memo,
   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';
-import { VZCodeContext } from '../../VZCodeContext';
+const DEBUG = false;
 interface MessageProps {
   id: string;
   role: 'user' | 'assistant';
-  content: string;
+  content?: string; // For non-streaming messages
   timestamp: number;
-  isStreaming?: boolean;
-  diffData?: UnifiedFilesDiff;
+  events?: StreamingEvent[]; // For streaming messages
+  isActive?: boolean; // Is this the currently streaming message?
   chatId?: string;
   showAdditionalWidgets?: boolean;
+  isStreaming?: boolean;
+  diffData?: UnifiedFilesDiff;
 }
-const MessageComponent = forwardRef<
+export const Message = forwardRef<
   DiffViewRef,
-  MessageProps
+  React.PropsWithChildren<MessageProps>
 >(
   (
     {
@@ -33,16 +38,25 @@ const MessageComponent = forwardRef<
       role,
       content,
       timestamp,
-      isStreaming,
-      diffData,
+      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(
@@ -62,22 +76,63 @@ const MessageComponent = forwardRef<
     return (
       <div className={messageClassName}>
         <div className="ai-chat-message-content">
-          <Markdown remarkPlugins={[remarkGfm]}>
-            {content}
-          </Markdown>
+          {/* 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}
@@ -87,6 +142,4 @@ const MessageComponent = forwardRef<
   },
 );
-MessageComponent.displayName = 'MessageComponent';
-export const Message = memo(MessageComponent);
+Message.displayName = 'Message';

package/src/client/VZSidebar/AIChat/MessageList.tsx CHANGED Viewed

@@ -1,12 +1,18 @@
-import { useRef, useEffect, memo, useState } from 'react';
+import {
+  useRef,
+  useEffect,
+  memo,
+  useState,
+  useContext,
+} from 'react';
 import { Message } from './Message';
-import { StreamingMessage } from './StreamingMessage';
 import { TypingIndicator } from './TypingIndicator';
 import { ThinkingScratchpad } from './ThinkingScratchpad';
 import { AIEditingStatusIndicator } from './FileEditingIndicator';
 import { VizChatMessage } from '@vizhub/viz-types';
 import { ExtendedVizChatMessage } from '../../../types.js';
 import { DiffViewRef } from './DiffView.js';
+import { VZCodeContext } from '../../VZCodeContext';
 const MessageListComponent = ({
   messages,
@@ -32,6 +38,10 @@ const MessageListComponent = ({
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const diffViewRef = useRef<DiffViewRef>(null);
+  // Get additional widgets from context
+  const { additionalWidgets, handleSendMessage } =
+    useContext(VZCodeContext);
   // Track previous loading state to detect when AI generation completes
   const [prevIsLoading, setPrevIsLoading] =
     useState(isLoading);
@@ -162,54 +172,64 @@ const MessageListComponent = ({
           msg.role === 'assistant' &&
           index === lastAssistantMessageIndex;
-        // Use StreamingMessage for assistant messages with streaming events
-        if (
-          msg.role === 'assistant' &&
-          isStreamingMessage
-        ) {
-          return (
-            <StreamingMessage
-              key={msg.id}
-              timestamp={msg.timestamp}
-              events={extendedMsg.streamingEvents || []}
-              isActive={index === lastAssistantMessageIndex}
-            >
-              {showThinkingScratchpad && (
-                <ThinkingScratchpad
-                  content={aiScratchpad || ''}
-                  isVisible={showThinkingScratchpad}
-                />
-              )}
-              {showConsolidatedStatusIndicator && (
-                <AIEditingStatusIndicator
-                  status={consolidatedStatus?.status || ''}
-                  fileName={consolidatedStatus?.fileName}
-                />
-              )}
-              {showTypingIndicator && <TypingIndicator />}
-            </StreamingMessage>
-          );
-        }
-        // Use regular Message component for user messages and non-streaming assistant messages
+        // Use Message for all messages now
         return (
           <Message
             key={msg.id}
             id={msg.id}
             role={msg.role}
-            content={msg.content}
+            content={
+              isStreamingMessage ? undefined : msg.content
+            }
             timestamp={msg.timestamp}
-            diffData={(msg as any).diffData}
+            events={
+              isStreamingMessage
+                ? extendedMsg.streamingEvents || []
+                : []
+            }
+            isActive={index === lastAssistantMessageIndex}
             chatId={chatId}
             showAdditionalWidgets={showAdditionalWidgets}
+            isStreaming={isStreamingMessage}
+            diffData={(msg as any).diffData}
             ref={
               isLastMessage && (msg as any).diffData
                 ? diffViewRef
                 : null
             }
-          />
+          >
+            {isStreamingMessage &&
+              showThinkingScratchpad && (
+                <ThinkingScratchpad
+                  content={aiScratchpad || ''}
+                  isVisible={showThinkingScratchpad}
+                />
+              )}
+            {isStreamingMessage &&
+              showConsolidatedStatusIndicator && (
+                <AIEditingStatusIndicator
+                  status={consolidatedStatus?.status || ''}
+                  fileName={consolidatedStatus?.fileName}
+                  additionalWidgets={
+                    consolidatedStatus?.status === 'Done' &&
+                    showAdditionalWidgets &&
+                    additionalWidgets &&
+                    chatId
+                      ? additionalWidgets({
+                          messageId: msg.id,
+                          chatId: chatId,
+                          handleSendMessage,
+                        })
+                      : undefined
+                  }
+                />
+              )}
+            {isStreamingMessage && showTypingIndicator && (
+              <TypingIndicator />
+            )}
+          </Message>
         );
       })}

package/src/client/VZSidebar/AIChat/index.tsx CHANGED Viewed

@@ -78,9 +78,6 @@ export const AIChat = () => {
     afterRender,
   } = useAutoScroll({ threshold: 24 });
-  // TODO fix this - currently always false
-  console.log('showJumpButton:', showJumpButton);
   // Get the active chat ID and chat data
   // If selectedChatId is set, use it; otherwise, if no chat selected, don't default to currentChatId
   const activeChatId = selectedChatId;

package/src/client/VZSidebar/AIChat/styles.scss CHANGED Viewed

@@ -140,8 +140,7 @@
 .file-editing-indicator {
   display: flex;
   align-items: center;
-  padding: 0.75rem;
-  margin: 0.5rem 0;
+  margin: 0.25rem 0;
   background-color: var(--vscode-editor-background);
   border: 1px solid var(--vscode-panel-border);
   border-radius: 4px;
@@ -150,6 +149,7 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    width: 100%;
   }
   .file-editing-icon {
@@ -161,6 +161,7 @@
   .file-editing-text {
     color: var(--vscode-foreground);
     font-size: 0.9rem;
+    flex: 1;
     code {
       background-color: var(
@@ -170,6 +171,36 @@
       border-radius: 3px;
       font-family: var(--vscode-editor-font-family);
     }
+    .file-editing-done-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      gap: 0.5rem;
+    }
+    .file-editing-done-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+      font-weight: 500;
+      margin-left: 4px;
+    }
+    .file-editing-done-widgets {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex-shrink: 0;
+      // // Override the margin-top for undo-button-container when inside file editing indicator
+      // .undo-button-container {
+      //   margin-top: 0;
+      //   margin-bottom: 0;
+      // }
+    }
   }
 }
@@ -288,33 +319,6 @@
   line-height: 1.4;
   word-wrap: break-word;
-  .undo-button-container {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    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;
-    }
-  }
   // Markdown styling for dark backgrounds
   pre {
     background-color: rgba(0, 0, 0, 0.3);

package/src/client/hooks/useAutoScroll.ts CHANGED Viewed

@@ -148,7 +148,6 @@ export const useAutoScroll = (
     // Ignore scroll events during programmatic scrolling
     if (isProgrammaticScrollRef.current) return;
-    console.log('handleScroll called');
     const container = containerRef.current;
     if (!container) return;