Merge branch 'main' into FEAT_BoltDYI_NEW_SETTINGS_UI

app/components/chat/AssistantMessage.tsx

@@ -1,6 +1,8 @@
 import { memo } from 'react';
 import { Markdown } from './Markdown';
 import type { JSONValue } from 'ai';
+import type { ProgressAnnotation } from '~/types/context';
+import Popover from '~/components/ui/Popover';
 
 interface AssistantMessageProps {
   content: string;
@@ -10,7 +12,12 @@ interface AssistantMessageProps {
 export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
   const filteredAnnotations = (annotations?.filter(
     (annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
-  ) || []) as { type: string; value: any }[];
+  ) || []) as { type: string; value: any } & { [key: string]: any }[];
+
+  let progressAnnotation: ProgressAnnotation[] = filteredAnnotations.filter(
+    (annotation) => annotation.type === 'progress',
+  ) as ProgressAnnotation[];
+  progressAnnotation = progressAnnotation.sort((a, b) => b.value - a.value);
 
   const usage: {
     completionTokens: number;
@@ -20,11 +27,18 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
 
   return (
     <div className="overflow-hidden w-full">
-      {usage && (
-        <div className="text-sm text-bolt-elements-textSecondary mb-2">
-          Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+      <>
+        <div className=" flex gap-2 items-center text-sm text-bolt-elements-textSecondary mb-2">
+          {progressAnnotation.length > 0 && (
+            <Popover trigger={<div className="i-ph:info" />}>{progressAnnotation[0].message}</Popover>
+          )}
+          {usage && (
+            <div>
+              Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+            </div>
+          )}
         </div>
-      )}
+      </>
       <Markdown html>{content}</Markdown>
     </div>
   );

app/components/chat/Chat.client.tsx

@@ -274,7 +274,7 @@ export const ChatImpl = memo(
 
       runAnimation();
 
-      if (!chatStarted && messageInput && autoSelectTemplate) {
+      if (!chatStarted && _input && autoSelectTemplate) {
         setFakeLoading(true);
         setMessages([
           {
@@ -296,7 +296,7 @@ export const ChatImpl = memo(
         // reload();
 
         const { template, title } = await selectStarterTemplate({
-          message: messageInput,
+          message: _input,
           model,
           provider,
         });
@@ -319,7 +319,7 @@ export const ChatImpl = memo(
               {
                 id: `${new Date().getTime()}`,
                 role: 'user',
-                content: messageInput,
+                content: _input,
 
                 // annotations: ['hidden'],
               },

app/components/ui/Popover.tsx

@@ -0,0 +1,20 @@
+import * as Popover from '@radix-ui/react-popover';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+export default ({ children, trigger }: PropsWithChildren<{ trigger: ReactNode }>) => (
+  <Popover.Root>
+    <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+    <Popover.Anchor />
+    <Popover.Portal>
+      <Popover.Content
+        sideOffset={10}
+        side="top"
+        align="center"
+        className="bg-bolt-elements-background-depth-2 text-bolt-elements-item-contentAccent p-2 rounded-md shadow-xl z-workbench"
+      >
+        {children}
+        <Popover.Arrow className="bg-bolt-elements-item-background-depth-2" />
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+);