From 809ee714e87156ce4b1476c133bb87e37b67de95 Mon Sep 17 00:00:00 2001 From: Eric Allam Date: Thu, 18 Jun 2026 15:01:18 +0100 Subject: [PATCH 01/27] chore(deps): pin react and react-dom to 18.3.1 via pnpm overrides Range-scoped to ^18 so packages on react 19 (rsc) stay untouched. Collapses the duplicate react copies that otherwise break hook-based SDK components with an invalid hook call. --- package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/package.json b/package.json index 1753f9464e..a38844a0cc 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,8 @@ "overrides": { "typescript": "5.5.4", "@types/node": "20.14.14", + "react@^18": "18.3.1", + "react-dom@^18": "18.3.1", "express@^4>body-parser": "1.20.3", "@remix-run/dev@2.17.4>tar-fs": "2.1.4", "tar@>=7 <7.5.11": "^7.5.11", From 87a00a9a15d0079f79b8f5aa3dce5f4af89cd921 Mon Sep 17 00:00:00 2001 From: Eric Allam Date: Thu, 18 Jun 2026 15:01:35 +0100 Subject: [PATCH 02/27] feat(sdk): add apiClient option to chat.createStartSessionAction When set, the returned action runs under the given baseURL and access token (via apiClientManager.runWithConfig) instead of the ambient SDK config, so one server can start chat sessions in a different runtime environment. --- .changeset/chat-start-session-api-client.md | 13 +++++++++++++ packages/trigger-sdk/src/v3/ai.ts | 16 ++++++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 .changeset/chat-start-session-api-client.md diff --git a/.changeset/chat-start-session-api-client.md b/.changeset/chat-start-session-api-client.md new file mode 100644 index 0000000000..b5c7d7d11d --- /dev/null +++ b/.changeset/chat-start-session-api-client.md @@ -0,0 +1,13 @@ +--- +"@trigger.dev/sdk": patch +--- + +`chat.createStartSessionAction` now accepts an `apiClient` option, so you can scope a chat session start to a specific environment's API config (`baseURL` / `accessToken`) without setting a global `TRIGGER_SECRET_KEY`. Useful when one server starts chats across more than one environment. + +```ts +const startSession = chat.createStartSessionAction("my-chat", { + apiClient: { baseURL, accessToken }, +}); + +await startSession({ chatId, clientData }); +``` diff --git a/packages/trigger-sdk/src/v3/ai.ts b/packages/trigger-sdk/src/v3/ai.ts index 685bb8909a..8473819df9 100644 --- a/packages/trigger-sdk/src/v3/ai.ts +++ b/packages/trigger-sdk/src/v3/ai.ts @@ -18,6 +18,7 @@ import { type PipeStreamResult, type RealtimeDefinedInputStream, type RealtimeDefinedStream, + type ApiClientConfiguration, type ReadStreamOptions, SemanticInternalAttributes, type SendInputStreamOptions, @@ -9989,6 +9990,12 @@ export type CreateChatStartSessionActionOptions = { * custom retry. Applies to both session-create and JWT-claims POSTs. */ fetch?: ChatStartSessionFetchOverride; + /** + * API client config (baseURL / accessToken) to scope this action to a specific + * environment, for callers that can't set a global `TRIGGER_SECRET_KEY`. The + * returned action runs under this config. + */ + apiClient?: ApiClientConfiguration; }; /** @@ -10081,6 +10088,15 @@ function createChatStartSessionAction( ); } + // Scope the action to `apiClient`'s env: re-enter without it so the body + // runs once, under that config (read via apiClientManager.accessToken/.baseURL). + if (options?.apiClient) { + const { apiClient, ...rest } = options; + return apiClientManager.runWithConfig(apiClient, () => + createChatStartSessionAction(taskId, rest)(params) + ); + } + // The first run boots before the user's first message lands on // `.in/append`, so it sees an empty `messages` array and `trigger: // "preload"`. This matches the pre-Sessions preload semantics: From 748053f87e565ab58c8709c52bc2565c3cbb65b8 Mon Sep 17 00:00:00 2001 From: Eric Allam Date: Thu, 18 Jun 2026 15:02:38 +0100 Subject: [PATCH 03/27] feat(webapp): scaffold the in-dashboard AI agent Adds an "Ask the agent" side panel on every environment page, backed by a chat.agent task that runs as its own internal Trigger project with no main-database or ClickHouse access. Conversations persist to a dedicated Postgres schema via a small Drizzle store; the panel restores the last open chat and resumes streaming without replay. No tools yet: the agent answers from the model only. Tools, delegated auth, and the data lane land in follow-ups. --- .claude/skills/drizzle/SKILL.md | 191 + .gitignore | 1 + .../dashboard-agent/DashboardAgent.tsx | 29 + .../dashboard-agent/DashboardAgentChat.tsx | 158 + .../DashboardAgentComposer.tsx | 58 + .../DashboardAgentContextBanner.tsx | 20 + .../dashboard-agent/DashboardAgentHeader.tsx | 57 + .../dashboard-agent/DashboardAgentHistory.tsx | 81 + .../DashboardAgentMessages.tsx | 49 + .../dashboard-agent/DashboardAgentPanel.tsx | 210 + .../DashboardAgentSuggestedPrompts.tsx | 39 + apps/webapp/app/env.server.ts | 9 + apps/webapp/app/hooks/useApiOrigin.ts | 8 + apps/webapp/app/root.tsx | 1 + .../route.tsx | 10 +- ...jectParam.env.$envParam.dashboard-agent.ts | 126 + .../app/services/dashboardAgent.server.ts | 37 + .../app/services/dashboardAgentDb.server.ts | 20 + apps/webapp/package.json | 2 + .../dashboard-agent-db/README.md | 43 + .../dashboard-agent-db/drizzle.config.ts | 17 + .../drizzle/0000_magenta_lilandra.sql | 25 + .../drizzle/meta/0000_snapshot.json | 178 + .../drizzle/meta/_journal.json | 13 + .../dashboard-agent-db/package.json | 21 + .../dashboard-agent-db/src/client.ts | 67 + .../dashboard-agent-db/src/index.ts | 3 + .../dashboard-agent-db/src/queries.ts | 216 + .../dashboard-agent-db/src/schema.ts | 73 + .../dashboard-agent-db/tsconfig.json | 18 + internal-packages/dashboard-agent/.gitignore | 3 + internal-packages/dashboard-agent/README.md | 42 + .../dashboard-agent/package.json | 24 + .../dashboard-agent/src/dashboard-agent.ts | 117 + .../dashboard-agent/src/index.ts | 7 + .../dashboard-agent/trigger.config.ts | 20 + .../dashboard-agent/tsconfig.json | 18 + pnpm-lock.yaml | 4086 ++++++++++------- 38 files changed, 4391 insertions(+), 1706 deletions(-) create mode 100644 .claude/skills/drizzle/SKILL.md create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentContextBanner.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentHistory.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentPanel.tsx create mode 100644 apps/webapp/app/components/dashboard-agent/DashboardAgentSuggestedPrompts.tsx create mode 100644 apps/webapp/app/hooks/useApiOrigin.ts create mode 100644 apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboard-agent.ts create mode 100644 apps/webapp/app/services/dashboardAgent.server.ts create mode 100644 apps/webapp/app/services/dashboardAgentDb.server.ts create mode 100644 internal-packages/dashboard-agent-db/README.md create mode 100644 internal-packages/dashboard-agent-db/drizzle.config.ts create mode 100644 internal-packages/dashboard-agent-db/drizzle/0000_magenta_lilandra.sql create mode 100644 internal-packages/dashboard-agent-db/drizzle/meta/0000_snapshot.json create mode 100644 internal-packages/dashboard-agent-db/drizzle/meta/_journal.json create mode 100644 internal-packages/dashboard-agent-db/package.json create mode 100644 internal-packages/dashboard-agent-db/src/client.ts create mode 100644 internal-packages/dashboard-agent-db/src/index.ts create mode 100644 internal-packages/dashboard-agent-db/src/queries.ts create mode 100644 internal-packages/dashboard-agent-db/src/schema.ts create mode 100644 internal-packages/dashboard-agent-db/tsconfig.json create mode 100644 internal-packages/dashboard-agent/.gitignore create mode 100644 internal-packages/dashboard-agent/README.md create mode 100644 internal-packages/dashboard-agent/package.json create mode 100644 internal-packages/dashboard-agent/src/dashboard-agent.ts create mode 100644 internal-packages/dashboard-agent/src/index.ts create mode 100644 internal-packages/dashboard-agent/trigger.config.ts create mode 100644 internal-packages/dashboard-agent/tsconfig.json diff --git a/.claude/skills/drizzle/SKILL.md b/.claude/skills/drizzle/SKILL.md new file mode 100644 index 0000000000..ee32d5fdd1 --- /dev/null +++ b/.claude/skills/drizzle/SKILL.md @@ -0,0 +1,191 @@ +--- +name: drizzle +description: Use this skill when writing or modifying Drizzle ORM schemas, queries, or migrations in this repo — specifically the `@internal/dashboard-agent-db` package (the dashboard agent's conversation datastore). Covers pg-core schema definition, the postgres-js driver, drizzle-kit migrations, and this repo's conventions: a dedicated Postgres schema, foreign-key-free cross-database design, pooler-safe connections, and the access-pattern query layer. Drizzle is NOT the main database — that's Prisma. +allowed-tools: Read, Write, Edit, Glob, Grep, Bash +--- + +# Drizzle ORM (this repo) + +Drizzle is used in exactly one place: **`internal-packages/dashboard-agent-db`** (`@internal/dashboard-agent-db`), the in-dashboard agent's conversation store. Everything else in the monorepo is **Prisma** (`@trigger.dev/database`). Keep them separate. + +Pinned versions: **`drizzle-orm` ^0.45**, **`drizzle-kit` ^0.31** (dev), **`postgres` ^3.4** (postgres.js driver). drizzle-orm and drizzle-kit are intentionally on different version lines — 0.31.x is the correct companion for 0.45.x, there is no peer dependency between them. + +## Critical rules + +1. **Drizzle is only the agent's own datastore.** The agent (and its task bundle) must have **no access to the main Prisma database or ClickHouse**. Never import the Prisma client into the agent task or into `@internal/dashboard-agent-db`. Main data is reached via the API, not Drizzle. +2. **Foreign-key-free.** In cloud this DB is a *separate* PlanetScale database, so it can't FK into the main DB. Reference main entities (`organizationId`, `userId`, …) **by id only — never `.references()`**. Joins happen in app code; tenant scoping is enforced in the query layer. +3. **One dedicated Postgres schema.** All tables live under `pgSchema("trigger_dashboard_agent")` so they're schema-qualified and isolated from Prisma's `public` schema (this is what makes the OSS single-database fallback safe). +4. **Pooler-safe connections.** Connections go through a transaction-mode pooler (PlanetScale / PgBouncer-style), so postgres.js must run with **`prepare: false`** — prepared statements don't survive a connection being handed to another client between checkouts. +5. **Node16 module resolution.** Relative imports need explicit **`.js`** extensions (`import { chats } from "./schema.js"`), even though the source is `.ts`. +6. **Scope every user query.** All queries that touch user data go through `src/queries.ts` and are scoped by `organizationId` / `userId`, so callers can't forget the `where`. Don't write ad-hoc cross-tenant queries elsewhere. + +## Package layout + +``` +internal-packages/dashboard-agent-db/ + drizzle.config.ts # drizzle-kit config (schema path, out dir, schemaFilter) + drizzle/ # generated migrations (committed) + src/ + schema.ts # pgSchema + table definitions + client.ts # createDashboardAgentDb() — postgres.js + drizzle + queries.ts # the access-pattern layer (org/user-scoped) + index.ts # barrel: re-exports schema, client, queries +``` + +`package.json` points `main`/`types` at `./src/index.ts` (consumed as source, no build step) — same as other simple internal packages. + +## Schema (pg-core) + +Use `pgSchema(...).table(...)`, not the bare `pgTable`, so tables land in the dedicated schema. ([schemas](https://orm.drizzle.team/docs/schemas), [pg column types](https://orm.drizzle.team/docs/column-types/pg), [indexes](https://orm.drizzle.team/docs/indexes-constraints)) + +```ts +import { sql } from "drizzle-orm"; +import { index, jsonb, pgSchema, text, timestamp } from "drizzle-orm/pg-core"; + +export const dashboardAgentSchema = pgSchema("trigger_dashboard_agent"); + +export const chats = dashboardAgentSchema.table( + "chats", + { + id: text("id").primaryKey(), + organizationId: text("organization_id").notNull(), // FK-free: id only, no .references() + userId: text("user_id").notNull(), + title: text("title").notNull().default("New chat"), + // JSONB with a typed view; .default([]) / .default({}) emit '[]'::jsonb / '{}'::jsonb + messages: jsonb("messages").$type().notNull().default([]), + metadata: jsonb("metadata").$type>().notNull().default({}), + deletedAt: timestamp("deleted_at", { withTimezone: true }), // soft delete + lastMessageAt: timestamp("last_message_at", { withTimezone: true }), + createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(), + }, + // Extra config returns an ARRAY in drizzle-orm 0.36+ (not an object). + (t) => [ + // Partial + ordered composite index. `.desc()` on the column, `.where(sql`...`)` for partial. + index("chats_org_user_last_msg_idx") + .on(t.organizationId, t.userId, t.lastMessageAt.desc()) + .where(sql`${t.deletedAt} is null`), + ] +); + +// Inferred row types for the query layer + consumers. +export type Chat = typeof chats.$inferSelect; +export type NewChat = typeof chats.$inferInsert; +``` + +Notes: +- `timestamp(..., { withTimezone: true })` → `timestamp with time zone`. Use `.defaultNow()` for `DEFAULT now()`. +- For a "newest first, nulls last" sort the partial index uses `.desc()`; the *query* uses raw `sql` for `NULLS LAST` (see below). +- Don't add `.references()` — see critical rule 2. + +## Client (postgres.js + drizzle) + +([connect overview](https://orm.drizzle.team/docs/connect-overview)) One small pool, `prepare: false`. In the agent task create it once in `onBoot` (per-process); in the webapp wrap it in the `singleton(...)` helper. + +```ts +import { drizzle, type PostgresJsDatabase } from "drizzle-orm/postgres-js"; +import postgres, { type Sql } from "postgres"; +import * as schema from "./schema.js"; + +export type DashboardAgentDb = PostgresJsDatabase; + +export function createDashboardAgentDb(connectionString: string, opts: { max?: number } = {}) { + const sql: Sql = postgres(connectionString, { + max: opts.max ?? 5, // small — the pooler does the real pooling + idle_timeout: 20, // release conns when an agent run suspends + prepare: false, // REQUIRED for transaction-mode poolers + }); + return { db: drizzle(sql, { schema }), sql, close: () => sql.end() }; +} +``` + +## Queries (the access-pattern layer) + +([select](https://orm.drizzle.team/docs/select), [insert](https://orm.drizzle.team/docs/insert), [operators](https://orm.drizzle.team/docs/operators), [transactions](https://orm.drizzle.team/docs/transactions), [joins](https://orm.drizzle.team/docs/joins)) + +```ts +import { and, desc, eq, isNull, sql } from "drizzle-orm"; + +// Select EXPLICIT columns for list views — never select a large blob (messages) +// or a secret (tokens) you don't need. `NULLS LAST` needs raw sql in orderBy. +await db + .select({ id: chats.id, title: chats.title, lastMessageAt: chats.lastMessageAt }) + .from(chats) + .where(and(eq(chats.organizationId, orgId), eq(chats.userId, userId), isNull(chats.deletedAt))) + .orderBy(sql`${chats.pinnedAt} desc nulls last`, desc(chats.lastMessageAt)) + .limit(50); + +// Idempotent create (avoids a duplicate-key race between two writers). +await db.insert(chats).values({ id, organizationId: orgId, userId }).onConflictDoNothing(); + +// Upsert. +await db + .insert(chatSessions) + .values({ chatId, publicAccessToken }) + .onConflictDoUpdate({ target: chatSessions.chatId, set: { publicAccessToken, updatedAt: sql`now()` } }); + +// Owner-scope a join (this DB is FK-free, so enforce ownership in the query). +await db + .select({ /* session cols */ }) + .from(chatSessions) + .innerJoin(chats, eq(chats.id, chatSessions.chatId)) + .where(and(eq(chatSessions.chatId, chatId), eq(chats.userId, userId))); + +// Multi-write that must be consistent on the next read → one transaction. +await db.transaction(async (tx) => { + await tx.update(chats).set({ messages, updatedAt: sql`now()` }).where(eq(chats.id, chatId)); + await tx.insert(chatSessions).values({ /* ... */ }).onConflictDoUpdate({ /* ... */ }); +}); +``` + +Use `sql\`now()\`` for DB-side timestamps in updates. + +## Migrations (drizzle-kit) + +([kit overview](https://orm.drizzle.team/docs/kit-overview), [generate](https://orm.drizzle.team/docs/drizzle-kit-generate), [migrate](https://orm.drizzle.team/docs/drizzle-kit-migrate)) + +`drizzle.config.ts` must set **`schemaFilter`** so drizzle-kit only ever manages our schema — never Prisma's `public` (critical in the OSS single-DB fallback): + +```ts +import { defineConfig } from "drizzle-kit"; +export default defineConfig({ + schema: "./src/schema.ts", + out: "./drizzle", + dialect: "postgresql", + schemaFilter: ["trigger_dashboard_agent"], + dbCredentials: { url: process.env.DASHBOARD_AGENT_DATABASE_URL ?? process.env.DATABASE_URL ?? "postgres://placeholder" }, +}); +``` + +Workflow: + +```bash +cd internal-packages/dashboard-agent-db +pnpm run db:generate # diff schema.ts → emit SQL into drizzle/. OFFLINE (no DB needed). +# review the generated drizzle/000N_*.sql before committing +pnpm run db:migrate # apply pending migrations. Needs a real DATABASE URL. +``` + +- `db:generate` is **offline** — it only reads `schema.ts`, so you can verify a schema change compiles to valid DDL with no database. Use it as a fast check. +- drizzle-kit names migration files with a **random suffix** (`0000_magenta_lilandra.sql`). Don't regenerate a committed migration just to "refresh" it — that churns the filename. After the first migration is committed, schema changes produce a **new** `000N_*.sql`; commit that. +- Generated DDL for a new schema is one `CREATE SCHEMA` + schema-qualified `CREATE TABLE`s + indexes, **no foreign keys** (by design here). + +## Common gotchas + +- **`prepare: false`** is not optional with a pooler — without it you'll get prepared-statement errors under load. +- **Missing `.js` extension** on a relative import → TS2835 under Node16 resolution. +- **Extra-config callback returns an array** `(t) => [ ... ]` in drizzle-orm 0.36+. The old object form `(t) => ({ ... })` is deprecated. +- **`NULLS LAST` / `NULLS FIRST`** aren't on the `desc()` helper — use raw `sql\`col desc nulls last\`` in `orderBy`. +- **Don't `SELECT *` into list views** — explicitly pick columns so you never ship a megabyte `messages` blob or a session token to a list query. +- **Adding a dependency**: edit `package.json`, then `pnpm i` from the repo root (never `pnpm add`). Mind the repo's `minimumReleaseAge` (3 days) — pin with a caret range and let pnpm resolve an old-enough version. + +## Reference (official docs) + +- Schema declaration — https://orm.drizzle.team/docs/sql-schema-declaration +- PostgreSQL column types — https://orm.drizzle.team/docs/column-types/pg +- Schemas (`pgSchema`) — https://orm.drizzle.team/docs/schemas +- Indexes & constraints — https://orm.drizzle.team/docs/indexes-constraints +- Connect (postgres-js) — https://orm.drizzle.team/docs/connect-overview +- Select / Insert / Update / Delete — https://orm.drizzle.team/docs/select · /insert · /update · /delete +- Joins / Operators — https://orm.drizzle.team/docs/joins · /operators +- Transactions — https://orm.drizzle.team/docs/transactions +- drizzle-kit (generate / migrate / push) — https://orm.drizzle.team/docs/kit-overview diff --git a/.gitignore b/.gitignore index d5f0c945ad..c1fe310333 100644 --- a/.gitignore +++ b/.gitignore @@ -67,6 +67,7 @@ apps/**/public/build **/.claude/settings.local.json .claude/architecture/ .claude/docs-plans/ +.claude/plans/ .claude/review-guides/ .claude/scheduled_tasks.lock .mcp.log diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx new file mode 100644 index 0000000000..9e4178049d --- /dev/null +++ b/apps/webapp/app/components/dashboard-agent/DashboardAgent.tsx @@ -0,0 +1,29 @@ +import { SparklesIcon } from "@heroicons/react/20/solid"; +import { useState } from "react"; +import { DashboardAgentPanel } from "./DashboardAgentPanel"; + +/** + * Mount point for the dashboard agent. Rendered as the trailing flex child of + * the env-scoped layout: when open it's a 380px side panel that pushes content; + * when closed it's a floating launcher. The panel only mounts while open, so the + * chat transport isn't created until the user opens it. + */ +export function DashboardAgent() { + const [open, setOpen] = useState(false); + + if (open) { + return setOpen(false)} />; + } + + return ( + + ); +} diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx new file mode 100644 index 0000000000..ae1c4b60e4 --- /dev/null +++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx @@ -0,0 +1,158 @@ +import { useChat } from "@ai-sdk/react"; +import type { UIMessage } from "@ai-sdk/react"; +import type { dashboardAgent } from "@internal/dashboard-agent"; +import { useTriggerChatTransport } from "@trigger.dev/sdk/chat/react"; +import { useCallback, useEffect, useRef, useState } from "react"; +import { DashboardAgentComposer } from "./DashboardAgentComposer"; +import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner"; +import { DashboardAgentMessages } from "./DashboardAgentMessages"; +import { DashboardAgentSuggestedPrompts } from "./DashboardAgentSuggestedPrompts"; + +// The persisted session for a chat: the session-scoped token plus the stream +// cursor. Resuming with `lastEventId` is what stops the agent's `.out` stream +// from replaying the previous turn. +export type DashboardAgentSession = { + publicAccessToken: string; + lastEventId?: string; +}; + +// Per-turn context for the agent. Matches the agent's clientDataSchema input. +export type DashboardAgentClientData = { + userId: string; + organizationId: string; + projectId?: string; + environmentId?: string; + currentPage?: string; +}; + +/** + * A single conversation. The panel mounts this with `key={chatId}`, so each + * chat gets its own transport constructed with its persisted session — the + * resume cursor flows in declaratively via the `sessions` option rather than + * an imperative setSession after the fact. A fresh chat passes no session and + * starts a new run on first send. + */ +export function DashboardAgentChat({ + chatId, + initialMessages, + session, + clientData, + apiOrigin, + actionPath, + projectSlug, + environmentSlug, + currentPage, + onTurnSettled, +}: { + chatId: string; + initialMessages: UIMessage[]; + session: DashboardAgentSession | null; + clientData: DashboardAgentClientData; + apiOrigin: string; + actionPath: string; + projectSlug: string; + environmentSlug: string; + currentPage: string; + onTurnSettled: () => void; +}) { + const [input, setInput] = useState(""); + + const transport = useTriggerChatTransport({ + task: "dashboard-agent", + baseURL: apiOrigin, + clientData, + sessions: session + ? { + [chatId]: { + publicAccessToken: session.publicAccessToken, + lastEventId: session.lastEventId, + isStreaming: false, + }, + } + : undefined, + startSession: async ({ chatId }) => { + const body = new FormData(); + body.set("intent", "start"); + body.set("chatId", chatId); + body.set("clientData", JSON.stringify(clientData)); + const res = await fetch(actionPath, { method: "POST", body }); + const data = (await res.json()) as { publicAccessToken?: string; error?: string }; + if (!res.ok || !data.publicAccessToken) { + throw new Error(data.error ?? "The dashboard agent couldn't start."); + } + return { publicAccessToken: data.publicAccessToken }; + }, + accessToken: async ({ chatId }) => { + const body = new FormData(); + body.set("intent", "token"); + body.set("chatId", chatId); + const res = await fetch(actionPath, { method: "POST", body }); + const data = (await res.json()) as { token?: string; error?: string }; + if (!res.ok || !data.token) { + throw new Error(data.error ?? "Couldn't refresh the dashboard agent token."); + } + return data.token; + }, + }); + + const { + messages, + sendMessage, + status, + stop: aiStop, + error, + } = useChat({ + id: chatId, + messages: initialMessages, + transport, + resume: !!session, + }); + + const isStreaming = status === "streaming"; + const isThinking = status === "submitted"; + + const submit = useCallback( + (text: string) => { + const trimmed = text.trim(); + if (!trimmed || isStreaming) return; + setInput(""); + void sendMessage({ text: trimmed }); + }, + [isStreaming, sendMessage] + ); + + const stop = useCallback(() => { + transport.stopGeneration(chatId); + aiStop(); + }, [transport, chatId, aiStop]); + + // Tell the panel to refresh its history list once a turn settles, so the new + // chat appears and titles/timestamps stay current. + const prevStatus = useRef(status); + useEffect(() => { + if (prevStatus.current === "streaming" && status === "ready") onTurnSettled(); + prevStatus.current = status; + }, [status, onTurnSettled]); + + return ( + <> + + {messages.length === 0 ? ( + + ) : ( + + )} + submit(input)} + onStop={stop} + isStreaming={isStreaming} + /> + + ); +} diff --git a/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx new file mode 100644 index 0000000000..345f05c7b4 --- /dev/null +++ b/apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx @@ -0,0 +1,58 @@ +import { PaperAirplaneIcon, StopIcon } from "@heroicons/react/20/solid"; +import { useRef } from "react"; +import { Button } from "~/components/primitives/Buttons"; +import { cn } from "~/utils/cn"; + +export function DashboardAgentComposer({ + value, + onChange, + onSubmit, + onStop, + isStreaming, +}: { + value: string; + onChange: (value: string) => void; + onSubmit: () => void; + onStop: () => void; + isStreaming: boolean; +}) { + const ref = useRef(null); + + return ( +
+
+
+