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 (
+
Chat based on {conversation.chat.api.name}. Check for mistakes.
+
{history.filter(({ role }) => role !== 'developer').map((message, index) => (
;
}
@@ -96,6 +97,8 @@ async function *parseSSE(body: NonNullable
): 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 {
const response = await fetch(new URL('./v1/messages', this.baseURL), {
@@ -180,7 +184,7 @@ export class Conversation {
onChange = new EventEmitter();
private _abortControllers = new Set();
- constructor(private chat: LLMChat, systemPrompt: string) {
+ constructor(public chat: LLMChat, systemPrompt: string) {
this.history = [{ role: 'developer', content: systemPrompt }];
}