WIP show reasoning in AI Assistant UI

Author: lukemelia

packages/ai-bot/lib/responder.ts

@@ -131,6 +131,9 @@ export class Responder {
     if (contentSnapshot?.length) {
       contentSnapshot = cleanContent(contentSnapshot);
       if (this.latestContent !== contentSnapshot) {
+        if (this.latestReasoning === thinkingMessage) {
+          this.latestReasoning = '';
+        }
         this.latestContent = contentSnapshot;
         await this.sendMessageEventWithThrottling();
       }

packages/host/app/components/ai-assistant/message/index.gts

@@ -60,6 +60,7 @@ interface Signature {
   Element: HTMLDivElement;
   Args: {
     formattedMessage: SafeString;
+    formattedReasoningContent?: SafeString | null;
     datetime: Date;
     isFromAssistant: boolean;
     isStreaming: boolean;
@@ -229,6 +230,12 @@ export default class AiAssistantMessage extends Component<Signature> {
           </div>
         {{/if}}
 
+        {{#if @formattedReasoningContent}}
+          <div class='reasoning-content'>
+            {{@formattedReasoningContent}}
+          </div>
+        {{/if}}
+
         <div class='content' data-test-ai-message-content>
           {{#if (and @isFromAssistant @isStreaming)}}
             <FormattedMessage
@@ -407,6 +414,12 @@ export default class AiAssistantMessage extends Component<Signature> {
         margin-top: var(--boxel-sp);
       }
 
+      .reasoning-content {
+        font-size: var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp-xs);
+        color: var(--boxel-450);
+      }
+
       .error-container {
         display: grid;
         grid-template-columns: auto 1fr auto;

packages/host/app/components/matrix/room-message.gts

@@ -105,6 +105,9 @@ export default class RoomMessage extends Component<Signature> {
         @formattedMessage={{htmlSafe
           (markdownToHtml this.message.formattedMessage)
         }}
+        @formattedReasoningContent={{htmlSafe
+          (markdownToHtml this.message.reasoningContent)
+        }}
         @monacoSDK={{@monacoSDK}}
         @datetime={{this.message.created}}
         @index={{@index}}

packages/host/app/lib/matrix-classes/message-builder.ts

@@ -79,6 +79,9 @@ export default class MessageBuilder {
       eventId: this.builderContext.effectiveEventId,
       index: this.builderContext.index,
       attachedFiles: this.attachedFiles,
+      reasoningContent:
+        (this.event.content as CardMessageContent)['app.boxel.reasoning'] ||
+        null,
     });
   }
 
@@ -156,6 +159,8 @@ export default class MessageBuilder {
 
     message.message = this.event.content.body;
     message.formattedMessage = this.event.content.formatted_body;
+    message.reasoningContent =
+      (this.event.content as CardMessageContent)['app.boxel.reasoning'] || null;
     message.isStreamingFinished =
       'isStreamingFinished' in this.event.content
         ? this.event.content.isStreamingFinished

packages/host/app/lib/matrix-classes/message.ts

@@ -46,13 +46,15 @@ interface RoomMessageOptional {
   index?: number;
   errorMessage?: string;
   clientGeneratedId?: string | null;
+  reasoningContent?: string | null;
 }
 
 export class Message implements RoomMessageInterface {
   @tracked formattedMessage: string;
   @tracked message: string;
   @tracked commands: TrackedArray<MessageCommand>;
   @tracked isStreamingFinished?: boolean;
+  @tracked reasoningContent?: string | null;
 
   attachedCardIds?: string[] | null;
   attachedFiles?: FileDef[];
@@ -83,6 +85,7 @@ export class Message implements RoomMessageInterface {
     this.status = init.status;
     this.roomId = init.roomId;
     this.attachedFiles = init.attachedFiles;
+    this.reasoningContent = init.reasoningContent;
     this.commands = new TrackedArray<MessageCommand>();
     this.instanceId = guidFor(this);
   }