@alexkroman1/aai 0.3.0

package/templates/memory-agent/agent.ts

@@ -0,0 +1,74 @@
+import { defineAgent } from "@alexkroman1/aai";
+import { z } from "zod";
+
+export default defineAgent({
+  name: "Memory Agent",
+  instructions: `You are a helpful assistant with persistent memory. You can \
+remember facts, preferences, and notes across conversations.
+
+When the user tells you something worth remembering, save it with a descriptive \
+key. When they ask about something you might have saved, look it up.
+
+Use save_memory for storing information and recall_memory for retrieving it. \
+Use list_memories to see what you have stored. Be proactive about saving \
+important details the user shares — names, preferences, ongoing projects, etc.
+
+Keep responses concise and conversational. Never say "I saved that to my \
+database" — just confirm naturally, like "Got it, I'll remember that."`,
+  greeting:
+    "Hey there. I'm an assistant with a long-term memory. Tell me things you want me to remember, and I'll recall them in future conversations.",
+  builtinTools: ["web_search"],
+  tools: {
+    save_memory: {
+      description:
+        "Save a piece of information to persistent memory. Use a descriptive key like 'user:name' or 'project:status'.",
+      parameters: z.object({
+        key: z.string().describe(
+          "A descriptive key for this memory (e.g. 'user:name', 'preference:color')",
+        ),
+        value: z.string().describe("The information to remember"),
+      }),
+      execute: async (
+        { key, value }: { key: string; value: string },
+        ctx,
+      ) => {
+        await ctx.kv.set(key, value);
+        return { saved: key };
+      },
+    },
+    recall_memory: {
+      description: "Retrieve a previously saved memory by its key.",
+      parameters: z.object({
+        key: z.string().describe("The key to look up"),
+      }),
+      execute: async ({ key }: { key: string }, ctx) => {
+        const value = await ctx.kv.get(key);
+        if (value === null) return { found: false, key };
+        return { found: true, key, value };
+      },
+    },
+    list_memories: {
+      description:
+        "List all saved memory keys, optionally filtered by a prefix (e.g. 'user:').",
+      parameters: z.object({
+        prefix: z.string().describe(
+          "Prefix to filter keys (e.g. 'user:'). Use empty string for all.",
+        ).optional(),
+      }),
+      execute: async ({ prefix }: { prefix?: string }, ctx) => {
+        const entries = await ctx.kv.list(prefix ?? "");
+        return { count: entries.length, keys: entries.map((e) => e.key) };
+      },
+    },
+    forget_memory: {
+      description: "Delete a previously saved memory by its key.",
+      parameters: z.object({
+        key: z.string().describe("The key to delete"),
+      }),
+      execute: async ({ key }: { key: string }, ctx) => {
+        await ctx.kv.delete(key);
+        return { deleted: key };
+      },
+    },
+  },
+});

package/templates/memory-agent/client.tsx

@@ -0,0 +1,2 @@
+import { App, mount } from "@alexkroman1/aai/ui";
+mount(App);

package/templates/night-owl/agent.ts

@@ -0,0 +1,98 @@
+import { defineAgent } from "@alexkroman1/aai";
+import { z } from "zod";
+
+const PICKS: Record<string, Record<string, string[]>> = {
+  movie: {
+    chill: ["Lost in Translation", "The Grand Budapest Hotel", "Amelie"],
+    intense: ["Inception", "Interstellar", "The Dark Knight"],
+    cozy: ["When Harry Met Sally", "The Holiday", "Paddington 2"],
+    spooky: ["The Shining", "Get Out", "Hereditary"],
+    funny: ["The Big Lebowski", "Airplane!", "Superbad"],
+  },
+  music: {
+    chill: [
+      "Khruangbin — Con Todo El Mundo",
+      "Tycho — Dive",
+      "Bonobo — Migration",
+    ],
+    intense: [
+      "Radiohead — OK Computer",
+      "Tool — Lateralus",
+      "Deftones — White Pony",
+    ],
+    cozy: [
+      "Norah Jones — Come Away with Me",
+      "Iron & Wine — Our Endless Numbered Days",
+      "Bon Iver — For Emma, Forever Ago",
+    ],
+    spooky: [
+      "Portishead — Dummy",
+      "Massive Attack — Mezzanine",
+      "Boards of Canada — Music Has the Right to Children",
+    ],
+    funny: [
+      "Weird Al — Running with Scissors",
+      "Flight of the Conchords — S/T",
+      "Tenacious D — S/T",
+    ],
+  },
+  book: {
+    chill: [
+      "Norwegian Wood — Murakami",
+      "The Alchemist — Coelho",
+      "Siddhartha — Hesse",
+    ],
+    intense: [
+      "Blood Meridian — McCarthy",
+      "House of Leaves — Danielewski",
+      "Neuromancer — Gibson",
+    ],
+    cozy: [
+      "The House in the Cerulean Sea — Klune",
+      "A Man Called Ove — Backman",
+      "Anxious People — Backman",
+    ],
+    spooky: [
+      "The Haunting of Hill House — Jackson",
+      "Mexican Gothic — Moreno-Garcia",
+      "The Turn of the Screw — James",
+    ],
+    funny: [
+      "Good Omens — Pratchett & Gaiman",
+      "Hitchhiker's Guide — Adams",
+      "Catch-22 — Heller",
+    ],
+  },
+};
+
+export default defineAgent({
+  name: "Night Owl",
+  instructions:
+    `You are Night Owl, a cozy evening companion. You help people wind down, recommend entertainment, and share interesting facts about the night sky. Keep your tone warm and relaxed. Use short, conversational responses.
+
+Use run_code for sleep calculations:
+- Each sleep cycle is 90 minutes, plus 15 minutes to fall asleep
+- Bedtime = wake_time - (cycles * 90 + 15) minutes
+- If result is negative, add 1440 (24 hours in minutes)
+- Format as HH:MM`,
+  greeting:
+    "Hey there, night owl. Try asking me for a cozy movie recommendation, or tell me what time you need to wake up and I'll calculate the best time to fall asleep.",
+  builtinTools: ["run_code"],
+  tools: {
+    recommend: {
+      description:
+        "Get recommendations for movies, music, or books based on mood.",
+      parameters: z.object({
+        category: z.enum(["movie", "music", "book"]),
+        mood: z.enum(["chill", "intense", "cozy", "spooky", "funny"]),
+      }),
+      execute: ({ category, mood }) => {
+        return {
+          category,
+          mood,
+          picks: PICKS[category]?.[mood] ?? [],
+        };
+      },
+    },
+  },
+});

package/templates/night-owl/client.tsx

@@ -0,0 +1,28 @@
+import { ChatView, mount, useSession } from "@alexkroman1/aai/ui";
+
+function NightOwl() {
+  const { started, start } = useSession();
+
+  if (!started.value) {
+    return (
+      <div class="flex items-center justify-center h-screen bg-aai-bg font-aai">
+        <div class="flex flex-col items-center gap-6 bg-aai-surface border border-aai-border rounded-lg px-12 py-10">
+          <div class="text-5xl">&#x1F989;</div>
+          <h1 class="text-xl font-semibold text-aai-text m-0">Night Owl</h1>
+          <p class="text-sm text-aai-text-muted m-0">your evening companion</p>
+          <button
+            type="button"
+            class="mt-2 px-8 py-3 rounded-aai text-sm font-medium cursor-pointer bg-aai-primary text-white border-none"
+            onClick={start}
+          >
+            Start Conversation
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <ChatView />;
+}
+
+mount(NightOwl);

package/templates/personal-finance/agent.ts

@@ -0,0 +1,26 @@
+import { defineAgent } from "@alexkroman1/aai";
+
+export default defineAgent({
+  name: "Penny",
+  greeting:
+    "Hey, I'm Penny, your personal finance helper. Try asking me something like, what's 100 dollars in euros, what's the price of bitcoin, or help me split a 120 dollar bill four ways with 20 percent tip.",
+  instructions:
+    `You are Penny, a friendly personal finance assistant. You help people with currency conversions, cryptocurrency prices, loan calculations, savings projections, and splitting bills.
+
+Rules:
+- Always show your math clearly when explaining calculations
+- When discussing investments or crypto, remind users that prices fluctuate and this is not financial advice
+- Be encouraging about savings goals
+- Keep responses concise — this is a voice conversation
+- Round dollar amounts to two decimal places for clarity
+
+API endpoints (use fetch_json):
+- Currency rates: https://open.er-api.com/v6/latest/{CODE} — returns { rates: { USD: 1.0, EUR: 0.85, ... } }
+- Crypto prices: https://api.coingecko.com/api/v3/simple/price?ids={coin}&vs_currencies={cur}&include_24hr_change=true&include_market_cap=true
+
+Math calculations (use run_code):
+- Compound interest: FV = principal * (1 + rate/n)^(n*years) + monthly * ((1 + rate/n)^(n*years) - 1) / (rate/n)
+- Loan payment: M = P * (r(1+r)^n) / ((1+r)^n - 1) where r = annual_rate/12, n = years*12
+- Tip calculator: tip = bill * percent/100, per_person = (bill + tip) / people`,
+  builtinTools: ["run_code", "fetch_json"],
+});

package/templates/personal-finance/client.tsx

@@ -0,0 +1,2 @@
+import { App, mount } from "@alexkroman1/aai/ui";
+mount(App);

package/templates/simple/agent.ts

@@ -0,0 +1,6 @@
+import { defineAgent } from "@alexkroman1/aai";
+
+export default defineAgent({
+  name: "Simple Assistant",
+  // builtinTools: ["web_search", "visit_webpage", "fetch_json", "run_code"],
+});

package/templates/simple/client.tsx

@@ -0,0 +1,2 @@
+import { App, mount } from "@alexkroman1/aai/ui";
+mount(App);

package/templates/smart-research/agent.ts

@@ -0,0 +1,164 @@
+import { defineAgent } from "@alexkroman1/aai";
+import { z } from "zod";
+import type { HookContext, StepInfo } from "@alexkroman1/aai/types";
+
+/**
+ * Smart Research Agent — demonstrates all 5 advanced features:
+ * 1. toolChoice: "required" — forces the LLM to use tools every step
+ * 2. ctx.messages — tools can read conversation history
+ * 3. onStep — logs each step's tool calls
+ * 4. onBeforeStep — restricts available tools based on research phase
+ * 5. maxSteps as function — adapts max steps based on session complexity
+ */
+
+type ResearchState = {
+  phase: "gather" | "analyze" | "respond";
+  sources: string[];
+  stepCount: number;
+  complexity: "simple" | "deep";
+};
+
+export default defineAgent({
+  name: "Smart Research Agent",
+  instructions: `You are a research assistant that gathers information, \
+analyzes it, then responds. You work in three phases:
+1. Gather: Use search and fetch tools to collect information.
+2. Analyze: Use the analyze tool to synthesize your findings.
+3. Respond: Deliver your final answer.
+
+Always search first, then analyze, then answer. Be thorough but concise.`,
+  greeting:
+    "I'm your research assistant. Ask me anything and I'll dig into it.",
+  builtinTools: ["web_search"],
+
+  // Feature 1: toolChoice — force the LLM to always use a tool
+  toolChoice: "required",
+
+  // Feature 5: maxSteps as function — more steps for complex research
+  maxSteps: (ctx: HookContext<ResearchState>) => {
+    const state = ctx.state;
+    return state.complexity === "deep" ? 10 : 5;
+  },
+
+  state: (): ResearchState => ({
+    phase: "gather",
+    sources: [],
+    stepCount: 0,
+    complexity: "simple",
+  }),
+
+  // Feature 3: onStep — track what tools were called each step
+  onStep: (step: StepInfo, ctx: HookContext<ResearchState>) => {
+    const state = ctx.state;
+    state.stepCount++;
+    for (const tc of step.toolCalls) {
+      console.log(
+        `[step ${step.stepNumber}] ${tc.toolName} (phase: ${state.phase})`,
+      );
+    }
+  },
+
+  // Feature 4: onBeforeStep — restrict tools per research phase
+  onBeforeStep: (
+    _stepNumber: number,
+    ctx: HookContext<ResearchState>,
+  ) => {
+    const state = ctx.state;
+    if (state.phase === "gather") {
+      return {
+        activeTools: [
+          "web_search",
+          "save_source",
+          "mark_complex",
+          "advance_phase",
+        ],
+      };
+    }
+    if (state.phase === "analyze") {
+      return {
+        activeTools: [
+          "analyze",
+          "conversation_summary",
+          "advance_phase",
+        ],
+      };
+    }
+    // respond phase: no tools needed, LLM responds with text directly
+    return { activeTools: [] };
+  },
+
+  tools: {
+    save_source: {
+      description: "Save a source URL found during research for later analysis",
+      parameters: z.object({
+        url: z.string().describe("The source URL"),
+        title: z.string().describe("Brief title or description"),
+      }),
+      execute: (args, ctx) => {
+        const state = ctx.state;
+        state.sources.push(`${args.title}: ${args.url}`);
+        return { saved: true, totalSources: state.sources.length };
+      },
+    },
+
+    mark_complex: {
+      description:
+        "Mark this research query as complex, allowing more search steps",
+      execute: (_args, ctx) => {
+        const state = ctx.state;
+        state.complexity = "deep";
+        return { complexity: "deep", maxSteps: 10 };
+      },
+    },
+
+    advance_phase: {
+      description:
+        "Move to the next research phase (gather -> analyze -> respond)",
+      execute: (_args, ctx) => {
+        const state = ctx.state;
+        if (state.phase === "gather") {
+          state.phase = "analyze";
+        } else if (state.phase === "analyze") {
+          state.phase = "respond";
+        }
+        return { phase: state.phase };
+      },
+    },
+
+    // Feature 2: ctx.messages — access conversation history in tools
+    analyze: {
+      description:
+        "Analyze all gathered sources and conversation context to form a conclusion",
+      parameters: z.object({
+        focus: z.string().describe("What aspect to focus the analysis on"),
+      }),
+      execute: (args, ctx) => {
+        const state = ctx.state;
+        // Use ctx.messages to see what's been discussed
+        const userMessages = ctx.messages.filter((m) => m.role === "user");
+        return {
+          focus: args.focus,
+          sources: state.sources,
+          conversationTurns: userMessages.length,
+          totalMessages: ctx.messages.length,
+          phase: state.phase,
+        };
+      },
+    },
+
+    conversation_summary: {
+      description: "Get a summary of the conversation so far",
+      execute: (_args, ctx) => {
+        const msgs = ctx.messages;
+        return {
+          totalMessages: msgs.length,
+          byRole: {
+            user: msgs.filter((m) => m.role === "user").length,
+            assistant: msgs.filter((m) => m.role === "assistant").length,
+            tool: msgs.filter((m) => m.role === "tool").length,
+          },
+        };
+      },
+    },
+  },
+});

package/templates/smart-research/client.tsx

@@ -0,0 +1,2 @@
+import { App, mount } from "@alexkroman1/aai/ui";
+mount(App);

package/templates/support/README.md

@@ -0,0 +1,62 @@
+# AssemblyAI Support Agent
+
+A voice-powered support agent for [AssemblyAI](https://assemblyai.com), built
+with [aai](https://github.com/anthropics/aai).
+
+## Getting started
+
+```sh
+aai deploy         # Bundle and deploy
+aai deploy -y      # Deploy without prompts
+```
+
+## Ingesting documentation into the vector store
+
+This agent uses `vector_search` to answer questions from AssemblyAI's docs.
+Before it can answer anything, you need to ingest the documentation:
+
+```sh
+aai rag https://assemblyai.com/docs/llms-full.txt
+```
+
+This fetches AssemblyAI's `llms-full.txt` (a single file containing all their
+documentation), chunks it, and upserts the chunks into the vector store.
+
+### Options
+
+```sh
+# Custom chunk size (default: 512 tokens)
+aai rag https://assemblyai.com/docs/llms-full.txt --chunk-size 256
+
+# Target a specific server
+aai rag https://assemblyai.com/docs/llms-full.txt --server http://localhost:3100
+```
+
+### How it works
+
+1. `aai rag` fetches the `llms-full.txt` file from the URL
+2. It splits the content into chunks (~512 tokens each by default)
+3. Each chunk is upserted into the vector store, scoped to this agent
+4. At runtime, the `vector_search` builtin tool queries the vector store to find
+   relevant documentation chunks for each user question
+
+### Re-ingesting
+
+Run the same `aai rag` command again to update the vector store with fresh
+documentation. Chunks are keyed by content, so unchanged pages won't be
+duplicated.
+
+## Environment variables
+
+```sh
+aai env add MY_KEY # Set a secret (prompts for value)
+aai env ls         # List secret names
+aai env pull       # Pull names into .env for reference
+aai env rm MY_KEY  # Remove a secret
+```
+
+Access secrets in your agent via `ctx.env.MY_KEY`.
+
+## Learn more
+
+See `CLAUDE.md` for the full agent API reference.

package/templates/support/agent.ts

@@ -0,0 +1,19 @@
+import { defineAgent } from "@alexkroman1/aai";
+
+export default defineAgent({
+  name: "AssemblyAI Support",
+  instructions:
+    `You are a friendly support agent for AssemblyAI. Help users with questions \
+about AssemblyAI's speech-to-text API, audio intelligence features, and integrations.
+
+- Always use vector_search to find relevant documentation before answering.
+- Base your answers strictly on the retrieved documentation — don't guess.
+- If search results aren't relevant to the question, say the docs don't cover that topic \
+and suggest visiting assemblyai.com or contacting support@assemblyai.com.
+- Be concise — this is a voice conversation.
+- When explaining API usage, mention endpoint names and key parameters.
+- If a question is ambiguous, ask the user to clarify which product or feature they mean.`,
+  greeting:
+    "Hi! I'm the AssemblyAI support assistant. I can help you with questions about our speech-to-text API, audio intelligence features, LLM gateway, and more. What can I help you with?",
+  builtinTools: ["vector_search"],
+});

package/templates/support/client.tsx

@@ -0,0 +1,2 @@
+import { App, mount } from "@alexkroman1/aai/ui";
+mount(App);

package/templates/travel-concierge/agent.ts

@@ -0,0 +1,29 @@
+import { defineAgent } from "@alexkroman1/aai";
+
+export default defineAgent({
+  name: "Aria",
+  instructions:
+    `You are Aria, a luxury travel concierge. You help customers plan trips,
+find flights and hotels, check weather at destinations, and convert currencies.
+
+Rules:
+- Always check weather before recommending activities
+- When discussing costs, convert to the customer's preferred currency
+- Suggest specific restaurants, landmarks, and experiences
+- Be warm and enthusiastic but concise — this is a voice conversation
+- If the customer hasn't specified dates, ask for them before searching flights
+- Use web_search to find current flight and hotel options, then visit_webpage for details
+
+API endpoints (use fetch_json):
+- Geocoding: https://geocoding-api.open-meteo.com/v1/search?name={city}&count=1&language=en
+  Returns { results: [{ name, country, latitude, longitude }] }
+- Weather forecast: https://api.open-meteo.com/v1/forecast?latitude={lat}&longitude={lon}&daily=temperature_2m_max,temperature_2m_min,precipitation_sum,weathercode&timezone=auto&forecast_days=7
+  Returns { daily: { time, temperature_2m_max, temperature_2m_min, precipitation_sum, weathercode } }
+  Weather codes: 0=Clear, 1=Mainly clear, 2=Partly cloudy, 3=Overcast, 45/48=Fog, 51/53/55=Drizzle, 61/63/65=Rain, 71/73/75=Snow, 80-82=Rain showers, 85/86=Snow showers, 95/96/99=Thunderstorm
+  Convert C to F: F = C * 9/5 + 32
+- Currency rates: https://open.er-api.com/v6/latest/{CODE}
+  Returns { rates: { USD: 1.0, EUR: 0.85, ... } }`,
+  greeting:
+    "Hey, I'm Aria, your travel concierge. Try asking me something like, what's the weather in Tokyo this week, or help me plan a long weekend in Barcelona.",
+  builtinTools: ["web_search", "visit_webpage", "fetch_json"],
+});

package/templates/travel-concierge/client.tsx

@@ -0,0 +1,2 @@
+import { App, mount } from "@alexkroman1/aai/ui";
+mount(App);

package/templates/web-researcher/agent.ts

@@ -0,0 +1,17 @@
+import { defineAgent } from "@alexkroman1/aai";
+
+export default defineAgent({
+  name: "Scout",
+  instructions:
+    `You are Scout, a research assistant who finds answers by searching the web.
+
+- Search first. Never guess or rely on memory for factual questions.
+- Use visit_webpage when search snippets aren't detailed enough.
+- For complex questions, search multiple times with different queries.
+- Cite sources by website name.
+- Be concise — this is a voice conversation.
+- If results are unclear or contradictory, say so.`,
+  greeting:
+    "Hey, I'm Scout. I search the web for answers. Try asking me something like, what happened in tech news today, or who won the last World Cup.",
+  builtinTools: ["web_search", "visit_webpage"],
+});

package/templates/web-researcher/client.tsx

@@ -0,0 +1,2 @@
+import { App, mount } from "@alexkroman1/aai/ui";
+mount(App);

package/ui/_components/app.tsx

@@ -0,0 +1,37 @@
+// Copyright 2025 the AAI authors. MIT license.
+import type * as preact from "preact";
+import { useMountConfig } from "../mount_context.ts";
+import { useSession } from "../signals.ts";
+import { ChatView } from "./chat_view.tsx";
+
+const AAI_LOGO = `▄▀█ ▄▀█ █\n█▀█ █▀█ █`;
+
+export function App(): preact.JSX.Element {
+  const { started, start } = useSession();
+  const { title } = useMountConfig();
+
+  if (!started.value) {
+    return (
+      <div class="flex items-center justify-center h-screen bg-aai-bg font-aai">
+        <div class="flex flex-col items-center gap-6 bg-aai-surface border border-aai-border rounded-lg px-12 py-10">
+          {title ? (
+            <span class="text-lg font-semibold text-aai-primary">{title}</span>
+          ) : (
+            <span class="font-aai-mono text-lg leading-[1.1] font-bold text-aai-primary whitespace-pre">
+              {AAI_LOGO}
+            </span>
+          )}
+          <button
+            type="button"
+            class="h-8 px-4 py-1.5 rounded-aai text-sm font-medium leading-[130%] cursor-pointer bg-aai-surface-hover text-aai-text-secondary border border-aai-border outline-none"
+            onClick={start}
+          >
+            Start
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <ChatView />;
+}

package/ui/_components/chat_view.tsx

@@ -0,0 +1,36 @@
+// Copyright 2025 the AAI authors. MIT license.
+import type * as preact from "preact";
+import { useMountConfig } from "../mount_context.ts";
+import { useSession } from "../signals.ts";
+import { Controls } from "./controls.tsx";
+import { ErrorBanner } from "./error_banner.tsx";
+import { MessageList } from "./message_list.tsx";
+import { StateIndicator } from "./state_indicator.tsx";
+
+const AAI_LOGO = `▄▀█ ▄▀█ █\n█▀█ █▀█ █`;
+
+export function ChatView(): preact.JSX.Element {
+  const { session } = useSession();
+  const { title } = useMountConfig();
+
+  return (
+    <div class="flex flex-col h-screen max-w-130 mx-auto bg-aai-bg text-aai-text font-aai text-sm">
+      {/* Header */}
+      <div class="flex items-center gap-3 px-4 py-3 border-b border-aai-border shrink-0">
+        {title ? (
+          <span class="text-sm font-semibold text-aai-primary">{title}</span>
+        ) : (
+          <span class="font-aai-mono text-[10px] leading-[1.1] font-bold text-aai-primary whitespace-pre">
+            {AAI_LOGO}
+          </span>
+        )}
+        <div class="ml-auto">
+          <StateIndicator state={session.state} />
+        </div>
+      </div>
+      <ErrorBanner error={session.error} />
+      <MessageList />
+      <Controls />
+    </div>
+  );
+}

package/ui/_components/controls.tsx

@@ -0,0 +1,32 @@
+// Copyright 2025 the AAI authors. MIT license.
+import { useSession } from "../signals.ts";
+
+export function Controls() {
+  const { running, toggle, reset } = useSession();
+
+  const btnBase =
+    "h-8 px-3 py-1.5 rounded-aai text-sm font-medium leading-[130%] cursor-pointer border border-transparent outline-none";
+
+  return (
+    <div class="flex gap-2 px-4 py-3 border-t border-aai-border shrink-0">
+      <button
+        type="button"
+        class={`${btnBase} ${
+          running.value
+            ? "bg-aai-surface-hover text-aai-text-secondary border-aai-border"
+            : "bg-aai-surface-hover text-aai-text-secondary border-aai-border"
+        }`}
+        onClick={toggle}
+      >
+        {running.value ? "Stop" : "Resume"}
+      </button>
+      <button
+        type="button"
+        class={`${btnBase} bg-transparent text-aai-text-secondary border-aai-border`}
+        onClick={reset}
+      >
+        New Conversation
+      </button>
+    </div>
+  );
+}