@bibobonking/opensol 3.0.3 → 3.1.1

package/src/components/MessageItem.tsx

@@ -21,7 +21,8 @@ import { createId, useChats } from '../store/chats'
 import { toolLabel } from '../agent/tools'
 import { formatBytes, cn } from '../lib/utils'
 import { Markdown } from './Markdown'
-import { ToolCallCard } from './ToolCallCard'
+import { ToolCallCard, diffForTool } from './ToolCallCard'
+import { DiffBadge } from './DiffView'
 import { ArrowRight } from 'lucide-react'
 import { LogoMark } from './Logo'
 
@@ -168,7 +169,15 @@ function changedFiles(tools: ToolMessage[]): string[] {
 }
 
 /** Lets the person roll back every file the agent wrote or edited during one turn. */
-function UndoBar({ turnId, files }: { turnId: string; files: string[] }) {
+function UndoBar({
+  turnId,
+  files,
+  diff,
+}: {
+  turnId: string
+  files: string[]
+  diff: { added: number; removed: number } | null
+}) {
   const askConfirm = useUi((state) => state.askConfirm)
   const notify = useUi((state) => state.notify)
   const [state, setState] = useState<'idle' | 'working' | 'undone'>('idle')
@@ -204,6 +213,7 @@ function UndoBar({ turnId, files }: { turnId: string; files: string[] }) {
       <span className="min-w-0 truncate">
         {state === 'undone' ? 'Changes undone' : `Changed ${shown}${rest > 0 ? ` and ${rest} more` : ''}`}
       </span>
+      {state !== 'undone' && diff && <DiffBadge added={diff.added} removed={diff.removed} className="shrink-0" />}
       {state !== 'undone' && (
         <button
           type="button"
@@ -218,6 +228,48 @@ function UndoBar({ turnId, files }: { turnId: string; files: string[] }) {
   )
 }
 
+function ThoughtToggle({ text }: { text: string }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="group/think flex max-w-full items-baseline gap-1.5 py-0.5 text-left text-[12px]"
+        aria-expanded={open}
+      >
+        <ArrowRight
+          size={11}
+          strokeWidth={2}
+          className={cn('relative top-[1px] shrink-0 self-center text-faint transition-transform duration-200 ease-out', open && 'rotate-90')}
+        />
+        <span className="shrink-0 font-medium text-muted group-hover/think:text-ink">Thought</span>
+        {!open && <span className="min-w-0 truncate text-[11px] text-faint">{text.replace(/\s+/g, ' ').trim().slice(0, 100)}</span>}
+      </button>
+      {open && (
+        <div className="thin-scroll animate-fade max-h-40 overflow-y-auto whitespace-pre-wrap pl-[17px] font-mono text-[11px] leading-relaxed text-faint">
+          {text}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function totalDiff(tools: ToolMessage[]) {
+  let added = 0
+  let removed = 0
+  let any = false
+  for (const tool of tools) {
+    if (!FILE_EDIT_TOOLS.has(tool.call.name)) continue
+    const diff = diffForTool(tool)
+    if (!diff) continue
+    any = true
+    added += diff.added
+    removed += diff.removed
+  }
+  return any ? { added, removed } : null
+}
+
 export function TaskCompletedBox({
   tools,
   intermediateMessages = [],
@@ -291,6 +343,10 @@ export function TaskCompletedBox({
           {summary ? ` (${summary})` : ''}
         </span>
         {failed > 0 && <span className="shrink-0 text-[12px] text-danger">· {failed} failed</span>}
+        {(() => {
+          const total = totalDiff(tools)
+          return total ? <DiffBadge added={total.added} removed={total.removed} className="shrink-0 text-[11.5px]" /> : null
+        })()}
       </button>
 
       {open && (
@@ -300,11 +356,7 @@ export function TaskCompletedBox({
               <ToolCallCard key={item.tool.id} message={item.tool} compact={!detailed} />
             ) : (
               <div key={item.message.id} className="py-1">
-                {item.message.reasoning.trim() && (
-                  <div className="thin-scroll max-h-40 overflow-y-auto whitespace-pre-wrap font-mono text-[11px] leading-relaxed text-faint">
-                    {item.message.reasoning}
-                  </div>
-                )}
+                {item.message.reasoning.trim() && <ThoughtToggle text={item.message.reasoning} />}
                 {item.message.content.trim() && (
                   <div className="mt-1 text-[12.5px] leading-relaxed text-muted">
                     <Markdown content={item.message.content} />
@@ -347,7 +399,8 @@ export function AssistantBlock({
     message.provider ? state.byProvider[message.provider] : undefined,
   )
   const [copied, setCopied] = useState(false)
-  const [reasoningOpen, setReasoningOpen] = useState(streaming)
+  // Thoughts stay closed until the person opens them, even while the model is still thinking.
+  const [reasoningOpen, setReasoningOpen] = useState(false)
   const hasBody = Boolean(message.content.trim() || message.reasoning.trim() || message.error)
   const modelName =
     providerModels?.find((model) => model.id === message.model)?.name ?? message.model ?? ''
@@ -368,10 +421,6 @@ export function AssistantBlock({
     .filter(Boolean)
     .join(' · ')
 
-  useEffect(() => {
-    if (streaming) setReasoningOpen(true)
-  }, [streaming])
-
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(message.content)
@@ -648,7 +697,7 @@ export function TurnBlock({
       )}
 
       {turn.user && changedFiles(allTools).length > 0 && (
-        <UndoBar turnId={turn.user.id} files={changedFiles(allTools)} />
+        <UndoBar turnId={turn.user.id} files={changedFiles(allTools)} diff={totalDiff(allTools)} />
       )}
     </div>
   )