From 554ef49a3ea340a8b94192b7630a99e36031cca5 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 13 Feb 2025 14:41:50 +0100
Subject: [PATCH] add divider

---
 packages/trace-viewer/src/ui/aiConversation.css | 12 ++++++++++++
 packages/trace-viewer/src/ui/aiConversation.tsx |  2 ++
 packages/trace-viewer/src/ui/llm.tsx            |  8 ++++++--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/trace-viewer/src/ui/aiConversation.css b/packages/trace-viewer/src/ui/aiConversation.css
index 459d20b0e0..214496017a 100644
--- a/packages/trace-viewer/src/ui/aiConversation.css
+++ b/packages/trace-viewer/src/ui/aiConversation.css
@@ -22,6 +22,18 @@
   color: #e0e0e0;
 }
 
+.chat-disclaimer {
+  text-align: center;
+  color: var(--vscode-editorBracketMatch-border);
+  margin: 0px;
+}
+
+.chat-container hr {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--vscode-titleBar-inactiveBackground);
+}
+
 .messages-container {
   flex: 1;
   overflow-y: auto;
diff --git a/packages/trace-viewer/src/ui/aiConversation.tsx b/packages/trace-viewer/src/ui/aiConversation.tsx
index ce7dcd0ee2..a1c21af4fe 100644
--- a/packages/trace-viewer/src/ui/aiConversation.tsx
+++ b/packages/trace-viewer/src/ui/aiConversation.tsx
@@ -31,6 +31,8 @@ export function AIConversation({ history, conversation }: { history: LLMMessage[
 
   return (
     <div className='chat-container'>
+      <p className='chat-disclaimer'>Chat based on {conversation.chat.api.name}. Check for mistakes.</p>
+      <hr/>
       <div className='messages-container'>
         {history.filter(({ role }) => role !== 'developer').map((message, index) => (
           <div
diff --git a/packages/trace-viewer/src/ui/llm.tsx b/packages/trace-viewer/src/ui/llm.tsx
index ad764dbf3d..d4cf62bdfd 100644
--- a/packages/trace-viewer/src/ui/llm.tsx
+++ b/packages/trace-viewer/src/ui/llm.tsx
@@ -24,7 +24,8 @@ export type LLMMessage = {
   displayContent?: string;
 };
 
-interface LLM {
+interface LLM { 
+  readonly name: string;
   chatCompletion(messages: LLMMessage[], signal: AbortSignal): AsyncGenerator<string>;
 }
 
@@ -96,6 +97,8 @@ async function *parseSSE(body: NonNullable<Response['body']>): AsyncGenerator<{
 
 class OpenAI implements LLM {
 
+  name = 'OpenAI';
+
   constructor(private apiKey: string, private baseURL = 'https://api.openai.com') {}
 
   async *chatCompletion(messages: LLMMessage[], signal: AbortSignal)  {
@@ -130,6 +133,7 @@ class OpenAI implements LLM {
 }
 
 class Anthropic implements LLM {
+  name = 'Anthropic';
   constructor(private apiKey: string, private baseURL = 'https://api.anthropic.com') {}
   async *chatCompletion(messages: LLMMessage[], signal: AbortSignal): AsyncGenerator<string> {
     const response = await fetch(new URL('./v1/messages', this.baseURL), {
@@ -180,7 +184,7 @@ export class Conversation {
   onChange = new EventEmitter<void>();
   private _abortControllers = new Set<AbortController>();
 
-  constructor(private chat: LLMChat, systemPrompt: string) {
+  constructor(public chat: LLMChat, systemPrompt: string) {
     this.history = [{ role: 'developer', content: systemPrompt }];
   }