mirror of
https://github.com/meta-llama/llama-stack.git
synced 2025-10-04 12:07:34 +00:00
feat(UI): Adding a session manager (#3203)
# What does this PR do? - Introduces the Agent Session creation for the Playground and allows users to set tools - note tools are actually not usable yet and this is marked explicitly - this also caches sessions locally for faster loading on the UI and deletes them appropriately - allows users to easily create new sessions as well - Moved Model Configuration settings and "System Message" / Prompt to the left component - Added new logo and favicon - Added new typing animation when LLM is generating ### Create New Session <img width="1916" height="1393" alt="Screenshot 2025-08-21 at 4 18 08 PM" src="https://github.com/user-attachments/assets/52c70ae3-a33e-4338-8522-8184c692c320" /> ### List of Sessions <img width="1920" height="1391" alt="Screenshot 2025-08-21 at 4 18 56 PM" src="https://github.com/user-attachments/assets/ed78c3c6-08ec-486c-8bad-9b7382c11360" /> <!-- If resolving an issue, uncomment and update the line below --> <!-- Closes #[issue-number] --> ## Test Plan Unit tests added --------- Signed-off-by: Francisco Javier Arceo <farceo@redhat.com>
This commit is contained in:
Francisco Arceo
GitHub
parent
c3b2b06974
commit
d78ac434bd
12 changed files with 2677 additions and 130 deletions
|
|
@ -161,10 +161,12 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||
|
||||
const isUser = role === "user";
|
||||
|
||||
const formattedTime = createdAt?.toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
const formattedTime = createdAt
|
||||
? new Date(createdAt).toLocaleTimeString("en-US", {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})
|
||||
: undefined;
|
||||
|
||||
if (isUser) {
|
||||
return (
|
||||
|
|
@ -185,7 +187,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||
|
||||
{showTimeStamp && createdAt ? (
|
||||
<time
|
||||
dateTime={createdAt.toISOString()}
|
||||
dateTime={new Date(createdAt).toISOString()}
|
||||
className={cn(
|
||||
"mt-1 block px-1 text-xs opacity-50",
|
||||
animation !== "none" && "duration-500 animate-in fade-in-0"
|
||||
|
|
@ -220,7 +222,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||
|
||||
{showTimeStamp && createdAt ? (
|
||||
<time
|
||||
dateTime={createdAt.toISOString()}
|
||||
dateTime={new Date(createdAt).toISOString()}
|
||||
className={cn(
|
||||
"mt-1 block px-1 text-xs opacity-50",
|
||||
animation !== "none" && "duration-500 animate-in fade-in-0"
|
||||
|
|
@ -262,7 +264,7 @@ export const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||
|
||||
{showTimeStamp && createdAt ? (
|
||||
<time
|
||||
dateTime={createdAt.toISOString()}
|
||||
dateTime={new Date(createdAt).toISOString()}
|
||||
className={cn(
|
||||
"mt-1 block px-1 text-xs opacity-50",
|
||||
animation !== "none" && "duration-500 animate-in fade-in-0"
|
||||
|
|
|
|||
345
llama_stack/ui/components/chat-playground/conversations.test.tsx
Normal file
345
llama_stack/ui/components/chat-playground/conversations.test.tsx
Normal file
|
|
@ -0,0 +1,345 @@
|
|||
import React from "react";
|
||||
import { render, screen, waitFor, act } from "@testing-library/react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { Conversations, SessionUtils } from "./conversations";
|
||||
import type { Message } from "@/components/chat-playground/chat-message";
|
||||
|
||||
interface ChatSession {
|
||||
id: string;
|
||||
name: string;
|
||||
messages: Message[];
|
||||
selectedModel: string;
|
||||
systemMessage: string;
|
||||
agentId: string;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
||||
const mockOnSessionChange = jest.fn();
|
||||
const mockOnNewSession = jest.fn();
|
||||
|
||||
// Mock the auth client
|
||||
const mockClient = {
|
||||
agents: {
|
||||
session: {
|
||||
list: jest.fn(),
|
||||
create: jest.fn(),
|
||||
delete: jest.fn(),
|
||||
retrieve: jest.fn(),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// Mock the useAuthClient hook
|
||||
jest.mock("@/hooks/use-auth-client", () => ({
|
||||
useAuthClient: jest.fn(() => mockClient),
|
||||
}));
|
||||
|
||||
// Mock additional SessionUtils methods that are now being used
|
||||
jest.mock("./conversations", () => {
|
||||
const actual = jest.requireActual("./conversations");
|
||||
return {
|
||||
...actual,
|
||||
SessionUtils: {
|
||||
...actual.SessionUtils,
|
||||
saveSessionData: jest.fn(),
|
||||
loadSessionData: jest.fn(),
|
||||
saveAgentConfig: jest.fn(),
|
||||
loadAgentConfig: jest.fn(),
|
||||
clearAgentCache: jest.fn(),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const localStorageMock = {
|
||||
getItem: jest.fn(),
|
||||
setItem: jest.fn(),
|
||||
removeItem: jest.fn(),
|
||||
clear: jest.fn(),
|
||||
};
|
||||
|
||||
Object.defineProperty(window, "localStorage", {
|
||||
value: localStorageMock,
|
||||
writable: true,
|
||||
});
|
||||
|
||||
// Mock crypto.randomUUID for test environment
|
||||
let uuidCounter = 0;
|
||||
Object.defineProperty(globalThis, "crypto", {
|
||||
value: {
|
||||
randomUUID: jest.fn(() => `test-uuid-${++uuidCounter}`),
|
||||
},
|
||||
writable: true,
|
||||
});
|
||||
|
||||
describe("SessionManager", () => {
|
||||
const mockSession: ChatSession = {
|
||||
id: "session_123",
|
||||
name: "Test Session",
|
||||
messages: [
|
||||
{
|
||||
id: "msg_1",
|
||||
role: "user",
|
||||
content: "Hello",
|
||||
createdAt: new Date(),
|
||||
},
|
||||
],
|
||||
selectedModel: "test-model",
|
||||
systemMessage: "You are a helpful assistant.",
|
||||
agentId: "agent_123",
|
||||
createdAt: 1710000000,
|
||||
updatedAt: 1710001000,
|
||||
};
|
||||
|
||||
const mockAgentSessions = [
|
||||
{
|
||||
session_id: "session_123",
|
||||
session_name: "Test Session",
|
||||
started_at: "2024-01-01T00:00:00Z",
|
||||
turns: [],
|
||||
},
|
||||
{
|
||||
session_id: "session_456",
|
||||
session_name: "Another Session",
|
||||
started_at: "2024-01-01T01:00:00Z",
|
||||
turns: [],
|
||||
},
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
localStorageMock.getItem.mockReturnValue(null);
|
||||
localStorageMock.setItem.mockImplementation(() => {});
|
||||
mockClient.agents.session.list.mockResolvedValue({
|
||||
data: mockAgentSessions,
|
||||
});
|
||||
mockClient.agents.session.create.mockResolvedValue({
|
||||
session_id: "new_session_123",
|
||||
});
|
||||
mockClient.agents.session.delete.mockResolvedValue(undefined);
|
||||
mockClient.agents.session.retrieve.mockResolvedValue({
|
||||
session_id: "test-session",
|
||||
session_name: "Test Session",
|
||||
started_at: new Date().toISOString(),
|
||||
turns: [],
|
||||
});
|
||||
uuidCounter = 0; // Reset UUID counter for consistent test behavior
|
||||
});
|
||||
|
||||
describe("Component Rendering", () => {
|
||||
test("does not render when no agent is selected", async () => {
|
||||
const { container } = await act(async () => {
|
||||
return render(
|
||||
<Conversations
|
||||
selectedAgentId=""
|
||||
currentSession={null}
|
||||
onSessionChange={mockOnSessionChange}
|
||||
onNewSession={mockOnNewSession}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
test("renders loading state initially", async () => {
|
||||
mockClient.agents.session.list.mockImplementation(
|
||||
() => new Promise(() => {}) // Never resolves to simulate loading
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
render(
|
||||
<Conversations
|
||||
selectedAgentId="agent_123"
|
||||
currentSession={null}
|
||||
onSessionChange={mockOnSessionChange}
|
||||
onNewSession={mockOnNewSession}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
expect(screen.getByText("Select Session")).toBeInTheDocument();
|
||||
// When loading, the "+ New" button should be disabled
|
||||
expect(screen.getByText("+ New")).toBeDisabled();
|
||||
});
|
||||
|
||||
test("renders session selector when agent sessions are loaded", async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<Conversations
|
||||
selectedAgentId="agent_123"
|
||||
currentSession={null}
|
||||
onSessionChange={mockOnSessionChange}
|
||||
onNewSession={mockOnNewSession}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Select Session")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
test("renders current session name when session is selected", async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<Conversations
|
||||
selectedAgentId="agent_123"
|
||||
currentSession={mockSession}
|
||||
onSessionChange={mockOnSessionChange}
|
||||
onNewSession={mockOnNewSession}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Test Session")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Agent API Integration", () => {
|
||||
test("loads sessions from agent API on mount", async () => {
|
||||
await act(async () => {
|
||||
render(
|
||||
<Conversations
|
||||
selectedAgentId="agent_123"
|
||||
currentSession={mockSession}
|
||||
onSessionChange={mockOnSessionChange}
|
||||
onNewSession={mockOnNewSession}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockClient.agents.session.list).toHaveBeenCalledWith(
|
||||
"agent_123"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("handles API errors gracefully", async () => {
|
||||
mockClient.agents.session.list.mockRejectedValue(new Error("API Error"));
|
||||
const consoleSpy = jest
|
||||
.spyOn(console, "error")
|
||||
.mockImplementation(() => {});
|
||||
|
||||
await act(async () => {
|
||||
render(
|
||||
<Conversations
|
||||
selectedAgentId="agent_123"
|
||||
currentSession={mockSession}
|
||||
onSessionChange={mockOnSessionChange}
|
||||
onNewSession={mockOnNewSession}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(consoleSpy).toHaveBeenCalledWith(
|
||||
"Error loading agent sessions:",
|
||||
expect.any(Error)
|
||||
);
|
||||
});
|
||||
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Error Handling", () => {
|
||||
test("component renders without crashing when API is unavailable", async () => {
|
||||
mockClient.agents.session.list.mockRejectedValue(
|
||||
new Error("Network Error")
|
||||
);
|
||||
const consoleSpy = jest
|
||||
.spyOn(console, "error")
|
||||
.mockImplementation(() => {});
|
||||
|
||||
await act(async () => {
|
||||
render(
|
||||
<Conversations
|
||||
selectedAgentId="agent_123"
|
||||
currentSession={mockSession}
|
||||
onSessionChange={mockOnSessionChange}
|
||||
onNewSession={mockOnNewSession}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
// Should still render the session manager with the select trigger
|
||||
expect(screen.getByRole("combobox")).toBeInTheDocument();
|
||||
expect(screen.getByText("+ New")).toBeInTheDocument();
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("SessionUtils", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
localStorageMock.getItem.mockReturnValue(null);
|
||||
localStorageMock.setItem.mockImplementation(() => {});
|
||||
});
|
||||
|
||||
describe("saveCurrentSessionId", () => {
|
||||
test("saves session ID to localStorage", () => {
|
||||
SessionUtils.saveCurrentSessionId("test-session-id");
|
||||
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
"chat-playground-current-session",
|
||||
"test-session-id"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("createDefaultSession", () => {
|
||||
test("creates default session with agent ID", () => {
|
||||
const result = SessionUtils.createDefaultSession("agent_123");
|
||||
|
||||
expect(result).toEqual(
|
||||
expect.objectContaining({
|
||||
name: "Default Session",
|
||||
messages: [],
|
||||
selectedModel: "",
|
||||
systemMessage: "You are a helpful assistant.",
|
||||
agentId: "agent_123",
|
||||
})
|
||||
);
|
||||
expect(result.id).toBeTruthy();
|
||||
expect(result.createdAt).toBeTruthy();
|
||||
expect(result.updatedAt).toBeTruthy();
|
||||
});
|
||||
|
||||
test("creates default session with inherited model", () => {
|
||||
const result = SessionUtils.createDefaultSession(
|
||||
"agent_123",
|
||||
"inherited-model"
|
||||
);
|
||||
|
||||
expect(result.selectedModel).toBe("inherited-model");
|
||||
expect(result.agentId).toBe("agent_123");
|
||||
});
|
||||
|
||||
test("creates unique session IDs", () => {
|
||||
const originalNow = Date.now;
|
||||
let mockTime = 1710005000;
|
||||
Date.now = jest.fn(() => ++mockTime);
|
||||
|
||||
const session1 = SessionUtils.createDefaultSession("agent_123");
|
||||
const session2 = SessionUtils.createDefaultSession("agent_123");
|
||||
|
||||
expect(session1.id).not.toBe(session2.id);
|
||||
|
||||
Date.now = originalNow;
|
||||
});
|
||||
|
||||
test("sets creation and update timestamps", () => {
|
||||
const result = SessionUtils.createDefaultSession("agent_123");
|
||||
|
||||
expect(result.createdAt).toBeTruthy();
|
||||
expect(result.updatedAt).toBeTruthy();
|
||||
expect(typeof result.createdAt).toBe("number");
|
||||
expect(typeof result.updatedAt).toBe("number");
|
||||
});
|
||||
});
|
||||
});
|
||||
568
llama_stack/ui/components/chat-playground/conversations.tsx
Normal file
568
llama_stack/ui/components/chat-playground/conversations.tsx
Normal file
|
|
@ -0,0 +1,568 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import type { Message } from "@/components/chat-playground/chat-message";
|
||||
import { useAuthClient } from "@/hooks/use-auth-client";
|
||||
import type {
|
||||
Session,
|
||||
SessionCreateParams,
|
||||
} from "llama-stack-client/resources/agents";
|
||||
|
||||
export interface ChatSession {
|
||||
id: string;
|
||||
name: string;
|
||||
messages: Message[];
|
||||
selectedModel: string;
|
||||
systemMessage: string;
|
||||
agentId: string;
|
||||
session?: Session;
|
||||
createdAt: number;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
||||
interface SessionManagerProps {
|
||||
currentSession: ChatSession | null;
|
||||
onSessionChange: (session: ChatSession) => void;
|
||||
onNewSession: () => void;
|
||||
selectedAgentId: string;
|
||||
}
|
||||
|
||||
const CURRENT_SESSION_KEY = "chat-playground-current-session";
|
||||
|
||||
// ensures this only happens client side
|
||||
const safeLocalStorage = {
|
||||
getItem: (key: string): string | null => {
|
||||
if (typeof window === "undefined") return null;
|
||||
try {
|
||||
return localStorage.getItem(key);
|
||||
} catch (err) {
|
||||
console.error("Error accessing localStorage:", err);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
setItem: (key: string, value: string): void => {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
localStorage.setItem(key, value);
|
||||
} catch (err) {
|
||||
console.error("Error writing to localStorage:", err);
|
||||
}
|
||||
},
|
||||
removeItem: (key: string): void => {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
localStorage.removeItem(key);
|
||||
} catch (err) {
|
||||
console.error("Error removing from localStorage:", err);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const generateSessionId = (): string => {
|
||||
return globalThis.crypto.randomUUID();
|
||||
};
|
||||
|
||||
export function Conversations({
|
||||
currentSession,
|
||||
onSessionChange,
|
||||
selectedAgentId,
|
||||
}: SessionManagerProps) {
|
||||
const [sessions, setSessions] = useState<ChatSession[]>([]);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [newSessionName, setNewSessionName] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const client = useAuthClient();
|
||||
|
||||
const loadAgentSessions = useCallback(async () => {
|
||||
if (!selectedAgentId) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await client.agents.session.list(selectedAgentId);
|
||||
console.log("Sessions response:", response);
|
||||
|
||||
if (!response.data || !Array.isArray(response.data)) {
|
||||
console.warn("Invalid sessions response, starting fresh");
|
||||
setSessions([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const agentSessions: ChatSession[] = response.data
|
||||
.filter(sessionData => {
|
||||
const isValid =
|
||||
sessionData &&
|
||||
typeof sessionData === "object" &&
|
||||
sessionData.session_id &&
|
||||
sessionData.session_name;
|
||||
if (!isValid) {
|
||||
console.warn("Filtering out invalid session:", sessionData);
|
||||
}
|
||||
return isValid;
|
||||
})
|
||||
.map(sessionData => ({
|
||||
id: sessionData.session_id,
|
||||
name: sessionData.session_name,
|
||||
messages: [],
|
||||
selectedModel: currentSession?.selectedModel || "",
|
||||
systemMessage:
|
||||
currentSession?.systemMessage || "You are a helpful assistant.",
|
||||
agentId: selectedAgentId,
|
||||
session: sessionData,
|
||||
createdAt: sessionData.started_at
|
||||
? new Date(sessionData.started_at).getTime()
|
||||
: Date.now(),
|
||||
updatedAt: sessionData.started_at
|
||||
? new Date(sessionData.started_at).getTime()
|
||||
: Date.now(),
|
||||
}));
|
||||
setSessions(agentSessions);
|
||||
} catch (error) {
|
||||
console.error("Error loading agent sessions:", error);
|
||||
setSessions([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [
|
||||
selectedAgentId,
|
||||
client,
|
||||
currentSession?.selectedModel,
|
||||
currentSession?.systemMessage,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedAgentId) {
|
||||
loadAgentSessions();
|
||||
}
|
||||
}, [selectedAgentId, loadAgentSessions]);
|
||||
|
||||
const createNewSession = async () => {
|
||||
if (!selectedAgentId) return;
|
||||
|
||||
const sessionName =
|
||||
newSessionName.trim() || `Session ${sessions.length + 1}`;
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const response = await client.agents.session.create(selectedAgentId, {
|
||||
session_name: sessionName,
|
||||
} as SessionCreateParams);
|
||||
|
||||
const newSession: ChatSession = {
|
||||
id: response.session_id,
|
||||
name: sessionName,
|
||||
messages: [],
|
||||
selectedModel: currentSession?.selectedModel || "",
|
||||
systemMessage:
|
||||
currentSession?.systemMessage || "You are a helpful assistant.",
|
||||
agentId: selectedAgentId,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
};
|
||||
|
||||
setSessions(prev => [...prev, newSession]);
|
||||
SessionUtils.saveCurrentSessionId(newSession.id, selectedAgentId);
|
||||
onSessionChange(newSession);
|
||||
|
||||
setNewSessionName("");
|
||||
setShowCreateForm(false);
|
||||
} catch (error) {
|
||||
console.error("Error creating session:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadSessionMessages = useCallback(
|
||||
async (agentId: string, sessionId: string): Promise<Message[]> => {
|
||||
try {
|
||||
const session = await client.agents.session.retrieve(
|
||||
agentId,
|
||||
sessionId
|
||||
);
|
||||
|
||||
if (!session || !session.turns || !Array.isArray(session.turns)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const messages: Message[] = [];
|
||||
for (const turn of session.turns) {
|
||||
// Add user messages from input_messages
|
||||
if (turn.input_messages && Array.isArray(turn.input_messages)) {
|
||||
for (const input of turn.input_messages) {
|
||||
if (input.role === "user" && input.content) {
|
||||
messages.push({
|
||||
id: `${turn.turn_id}-user-${messages.length}`,
|
||||
role: "user",
|
||||
content:
|
||||
typeof input.content === "string"
|
||||
? input.content
|
||||
: JSON.stringify(input.content),
|
||||
createdAt: new Date(turn.started_at || Date.now()),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add assistant message from output_message
|
||||
if (turn.output_message && turn.output_message.content) {
|
||||
messages.push({
|
||||
id: `${turn.turn_id}-assistant-${messages.length}`,
|
||||
role: "assistant",
|
||||
content:
|
||||
typeof turn.output_message.content === "string"
|
||||
? turn.output_message.content
|
||||
: JSON.stringify(turn.output_message.content),
|
||||
createdAt: new Date(
|
||||
turn.completed_at || turn.started_at || Date.now()
|
||||
),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return messages;
|
||||
} catch (error) {
|
||||
console.error("Error loading session messages:", error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
[client]
|
||||
);
|
||||
|
||||
const switchToSession = useCallback(
|
||||
async (sessionId: string) => {
|
||||
const session = sessions.find(s => s.id === sessionId);
|
||||
if (session) {
|
||||
setLoading(true);
|
||||
try {
|
||||
// Load messages for this session
|
||||
const messages = await loadSessionMessages(
|
||||
selectedAgentId,
|
||||
sessionId
|
||||
);
|
||||
const sessionWithMessages = {
|
||||
...session,
|
||||
messages,
|
||||
};
|
||||
|
||||
SessionUtils.saveCurrentSessionId(sessionId, selectedAgentId);
|
||||
onSessionChange(sessionWithMessages);
|
||||
} catch (error) {
|
||||
console.error("Error switching to session:", error);
|
||||
// Fallback to session without messages
|
||||
SessionUtils.saveCurrentSessionId(sessionId, selectedAgentId);
|
||||
onSessionChange(session);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
[sessions, selectedAgentId, loadSessionMessages, onSessionChange]
|
||||
);
|
||||
|
||||
const deleteSession = async (sessionId: string) => {
|
||||
if (sessions.length <= 1 || !selectedAgentId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
confirm(
|
||||
"Are you sure you want to delete this session? This action cannot be undone."
|
||||
)
|
||||
) {
|
||||
setLoading(true);
|
||||
try {
|
||||
await client.agents.session.delete(selectedAgentId, sessionId);
|
||||
|
||||
const updatedSessions = sessions.filter(s => s.id !== sessionId);
|
||||
setSessions(updatedSessions);
|
||||
|
||||
if (currentSession?.id === sessionId) {
|
||||
const newCurrentSession = updatedSessions[0] || null;
|
||||
if (newCurrentSession) {
|
||||
SessionUtils.saveCurrentSessionId(
|
||||
newCurrentSession.id,
|
||||
selectedAgentId
|
||||
);
|
||||
onSessionChange(newCurrentSession);
|
||||
} else {
|
||||
SessionUtils.clearCurrentSession(selectedAgentId);
|
||||
onNewSession();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error deleting session:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (currentSession) {
|
||||
setSessions(prevSessions => {
|
||||
const updatedSessions = prevSessions.map(session =>
|
||||
session.id === currentSession.id ? currentSession : session
|
||||
);
|
||||
|
||||
if (!prevSessions.find(s => s.id === currentSession.id)) {
|
||||
updatedSessions.push(currentSession);
|
||||
}
|
||||
|
||||
return updatedSessions;
|
||||
});
|
||||
}
|
||||
}, [currentSession]);
|
||||
|
||||
// Don't render if no agent is selected
|
||||
if (!selectedAgentId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2">
|
||||
<Select
|
||||
value={currentSession?.id || ""}
|
||||
onValueChange={switchToSession}
|
||||
>
|
||||
<SelectTrigger className="w-[200px]">
|
||||
<SelectValue placeholder="Select Session" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sessions.map(session => (
|
||||
<SelectItem key={session.id} value={session.id}>
|
||||
{session.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Button
|
||||
onClick={() => setShowCreateForm(true)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={loading || !selectedAgentId}
|
||||
>
|
||||
+ New
|
||||
</Button>
|
||||
|
||||
{currentSession && sessions.length > 1 && (
|
||||
<Button
|
||||
onClick={() => deleteSession(currentSession.id)}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive hover:bg-destructive/10"
|
||||
title="Delete current session"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showCreateForm && (
|
||||
<Card className="absolute top-full left-0 mt-2 p-4 space-y-3 w-80 z-50 bg-background border shadow-lg">
|
||||
<h3 className="text-md font-semibold">Create New Session</h3>
|
||||
|
||||
<Input
|
||||
value={newSessionName}
|
||||
onChange={e => setNewSessionName(e.target.value)}
|
||||
placeholder="Session name (optional)"
|
||||
onKeyDown={e => {
|
||||
if (e.key === "Enter") {
|
||||
createNewSession();
|
||||
} else if (e.key === "Escape") {
|
||||
setShowCreateForm(false);
|
||||
setNewSessionName("");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
onClick={createNewSession}
|
||||
className="flex-1"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? "Creating..." : "Create"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setShowCreateForm(false);
|
||||
setNewSessionName("");
|
||||
}}
|
||||
className="flex-1"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{currentSession && sessions.length > 1 && (
|
||||
<div className="absolute top-full left-0 mt-1 text-xs text-gray-500 whitespace-nowrap">
|
||||
{sessions.length} sessions • Current: {currentSession.name}
|
||||
{currentSession.messages.length > 0 &&
|
||||
` • ${currentSession.messages.length} messages`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export const SessionUtils = {
|
||||
loadCurrentSessionId: (agentId?: string): string | null => {
|
||||
const key = agentId
|
||||
? `${CURRENT_SESSION_KEY}-${agentId}`
|
||||
: CURRENT_SESSION_KEY;
|
||||
return safeLocalStorage.getItem(key);
|
||||
},
|
||||
|
||||
saveCurrentSessionId: (sessionId: string, agentId?: string) => {
|
||||
const key = agentId
|
||||
? `${CURRENT_SESSION_KEY}-${agentId}`
|
||||
: CURRENT_SESSION_KEY;
|
||||
safeLocalStorage.setItem(key, sessionId);
|
||||
},
|
||||
|
||||
createDefaultSession: (
|
||||
agentId: string,
|
||||
inheritModel?: string
|
||||
): ChatSession => ({
|
||||
id: generateSessionId(),
|
||||
name: "Default Session",
|
||||
messages: [],
|
||||
selectedModel: inheritModel || "",
|
||||
systemMessage: "You are a helpful assistant.",
|
||||
agentId,
|
||||
createdAt: Date.now(),
|
||||
updatedAt: Date.now(),
|
||||
}),
|
||||
|
||||
clearCurrentSession: (agentId?: string) => {
|
||||
const key = agentId
|
||||
? `${CURRENT_SESSION_KEY}-${agentId}`
|
||||
: CURRENT_SESSION_KEY;
|
||||
safeLocalStorage.removeItem(key);
|
||||
},
|
||||
|
||||
loadCurrentAgentId: (): string | null => {
|
||||
return safeLocalStorage.getItem("chat-playground-current-agent");
|
||||
},
|
||||
|
||||
saveCurrentAgentId: (agentId: string) => {
|
||||
safeLocalStorage.setItem("chat-playground-current-agent", agentId);
|
||||
},
|
||||
|
||||
// Comprehensive session caching
|
||||
saveSessionData: (agentId: string, sessionData: ChatSession) => {
|
||||
const key = `chat-playground-session-data-${agentId}-${sessionData.id}`;
|
||||
safeLocalStorage.setItem(
|
||||
key,
|
||||
JSON.stringify({
|
||||
...sessionData,
|
||||
cachedAt: Date.now(),
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
loadSessionData: (agentId: string, sessionId: string): ChatSession | null => {
|
||||
const key = `chat-playground-session-data-${agentId}-${sessionId}`;
|
||||
const cached = safeLocalStorage.getItem(key);
|
||||
if (!cached) return null;
|
||||
|
||||
try {
|
||||
const data = JSON.parse(cached);
|
||||
// Check if cache is fresh (less than 1 hour old)
|
||||
const cacheAge = Date.now() - (data.cachedAt || 0);
|
||||
if (cacheAge > 60 * 60 * 1000) {
|
||||
safeLocalStorage.removeItem(key);
|
||||
return null;
|
||||
}
|
||||
|
||||
// Convert date strings back to Date objects
|
||||
return {
|
||||
...data,
|
||||
messages: data.messages.map(
|
||||
(msg: { createdAt: string; [key: string]: unknown }) => ({
|
||||
...msg,
|
||||
createdAt: new Date(msg.createdAt),
|
||||
})
|
||||
),
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("Error parsing cached session data:", error);
|
||||
safeLocalStorage.removeItem(key);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
// Agent config caching
|
||||
saveAgentConfig: (
|
||||
agentId: string,
|
||||
config: {
|
||||
toolgroups?: Array<
|
||||
string | { name: string; args: Record<string, unknown> }
|
||||
>;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
) => {
|
||||
const key = `chat-playground-agent-config-${agentId}`;
|
||||
safeLocalStorage.setItem(
|
||||
key,
|
||||
JSON.stringify({
|
||||
config,
|
||||
cachedAt: Date.now(),
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
loadAgentConfig: (
|
||||
agentId: string
|
||||
): {
|
||||
toolgroups?: Array<
|
||||
string | { name: string; args: Record<string, unknown> }
|
||||
>;
|
||||
[key: string]: unknown;
|
||||
} | null => {
|
||||
const key = `chat-playground-agent-config-${agentId}`;
|
||||
const cached = safeLocalStorage.getItem(key);
|
||||
if (!cached) return null;
|
||||
|
||||
try {
|
||||
const data = JSON.parse(cached);
|
||||
// Check if cache is fresh (less than 30 minutes old)
|
||||
const cacheAge = Date.now() - (data.cachedAt || 0);
|
||||
if (cacheAge > 30 * 60 * 1000) {
|
||||
safeLocalStorage.removeItem(key);
|
||||
return null;
|
||||
}
|
||||
return data.config;
|
||||
} catch (error) {
|
||||
console.error("Error parsing cached agent config:", error);
|
||||
safeLocalStorage.removeItem(key);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
// Clear all cached data for an agent
|
||||
clearAgentCache: (agentId: string) => {
|
||||
const keys = Object.keys(localStorage).filter(
|
||||
key =>
|
||||
key.includes(`chat-playground-session-data-${agentId}`) ||
|
||||
key.includes(`chat-playground-agent-config-${agentId}`)
|
||||
);
|
||||
keys.forEach(key => safeLocalStorage.removeItem(key));
|
||||
},
|
||||
};
|
||||
|
|
@ -5,9 +5,9 @@ export function TypingIndicator() {
|
|||
<div className="justify-left flex space-x-1">
|
||||
<div className="rounded-lg bg-muted p-3">
|
||||
<div className="flex -space-x-2.5">
|
||||
<Dot className="h-5 w-5 animate-typing-dot-bounce" />
|
||||
<Dot className="h-5 w-5 animate-typing-dot-bounce [animation-delay:90ms]" />
|
||||
<Dot className="h-5 w-5 animate-typing-dot-bounce [animation-delay:180ms]" />
|
||||
<Dot className="h-5 w-5 animate-typing-dot-1" />
|
||||
<Dot className="h-5 w-5 animate-typing-dot-2" />
|
||||
<Dot className="h-5 w-5 animate-typing-dot-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue