feat(assistant): displaying annotations in the conversation

Author: sebastianmusial

apps/spa/src/app/app.config.ts

@@ -5,14 +5,12 @@ import { routes } from './app.routes';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 import { provideMarkdown } from 'ngx-markdown';
-import { AnnotationPipe } from './pipes/annotation.pipe';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideAnimations(),
     provideHttpClient(),
     provideMarkdown(),
-    AnnotationPipe,
   ],
 };

apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.html

@@ -0,0 +1,7 @@
+<div
+  class="annotation"
+  (mouseover)="showDetails()"
+  [matTooltip]="fileDetails ? fileDetails.filename : 'Reading data...'"
+  matTooltipPosition="above">
+  [{{ index }}]
+</div>

apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.scss

@@ -0,0 +1,9 @@
+@import 'settings';
+
+.annotation {
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}

apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ChatAnnotationComponent } from './chat-annotation.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('ChatAnnotationComponent', () => {
+  let component: ChatAnnotationComponent;
+  let fixture: ComponentFixture<ChatAnnotationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ChatAnnotationComponent, 
+        HttpClientTestingModule,
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatAnnotationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/spa/src/app/components/chat/chat-annotation/chat-annotation.component.ts

@@ -0,0 +1,39 @@
+import { Component, Input } from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { Annotation } from 'openai/resources/beta/threads';
+import { ChatClientService } from '../../../modules/+chat/shared/chat-client.service';
+import { FileObject } from 'openai/resources';
+import { isFileCitation } from '../../../pipes/annotation.pipe';
+import { take } from 'rxjs';
+
+@Component({
+  selector: 'ai-chat-annotation',
+  standalone: true,
+  templateUrl: './chat-annotation.component.html',
+  styleUrl: './chat-annotation.component.scss',
+  imports: [MatTooltip],
+})
+export class ChatAnnotationComponent {
+  @Input() annotation!: Annotation;
+  @Input() index = 1;
+  fileDetails!: FileObject;
+
+  get fileId(): string {
+    return isFileCitation(this.annotation)
+      ? this.annotation.file_citation.file_id
+      : this.annotation.file_path.file_id;
+  }
+
+  constructor(private chatClientService: ChatClientService) {}
+
+  showDetails() {
+    if (!this.fileId || !!this.fileDetails) {
+      return;
+    }
+
+    this.chatClientService
+      .retriveFile(this.fileId)
+      .pipe(take(1))
+      .subscribe(details => (this.fileDetails = details));
+  }
+}

apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.html

@@ -0,0 +1,10 @@
+@if (message && message.type === 'text' && message.text.annotations.length) {
+  <div class="title">Annotations:</div>
+  <div class="content">
+    @for (annotation of message.text.annotations; track annotation.text) {
+      <ai-chat-annotation [annotation]="annotation" [index]="$index + 1">
+        [{{ $index + 1 }}]
+      </ai-chat-annotation>
+    }
+  </div>
+}

apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.scss

@@ -0,0 +1,33 @@
+@import 'settings';
+
+:host {
+  display: flex;
+  align-items: baseline;
+  gap: $size-2;
+  border-top: 1px dashed var(--color-grey-500);
+  margin-top: $size-3;
+  padding-top: $size-3;
+  font-size: 12px;
+
+  &:empty {
+    display: none;
+  }
+}
+
+.title {
+  font-weight: 500;
+}
+
+.content {
+  display: flex;
+  gap: $size-1;
+  margin-top: $size-2;
+}
+
+.annotation {
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}

apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MarkdownModule } from 'ngx-markdown';
+import { ChatAnnotationsComponent } from './chat-annotations.component';
+
+describe('ChatAnnotationsComponent', () => {
+  let component: ChatAnnotationsComponent;
+  let fixture: ComponentFixture<ChatAnnotationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChatAnnotationsComponent, MarkdownModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChatAnnotationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/spa/src/app/components/chat/chat-annotations/chat-annotations.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { MatTooltip } from '@angular/material/tooltip';
+import { MessageContent } from 'openai/resources/beta/threads';
+import { ChatAnnotationComponent } from '../chat-annotation/chat-annotation.component';
+
+@Component({
+  selector: 'ai-chat-annotations',
+  standalone: true,
+  templateUrl: './chat-annotations.component.html',
+  styleUrl: './chat-annotations.component.scss',
+  imports: [MatTooltip, ChatAnnotationComponent],
+})
+export class ChatAnnotationsComponent {
+  @Input() message!: MessageContent;
+}

apps/spa/src/app/components/chat/chat-message/chat-message.component.html

@@ -4,8 +4,11 @@
   }
 
   <div class="chat-message">
-    @if (message | messageText) {
-      <span markdown [data]="message | messageText"></span>
+    @for (msg of message.content; track msg) {
+      @if (msg.type === 'text') {
+        <span markdown [data]="msg | annotation"></span>
+      }
+      <ai-chat-annotations [message]="msg" />
     }
 
     @if ((message | messageImageFile).length) {