Website chat

import { TalqingClient } from "@talqing/sdk";
import { getSession } from "@/lib/auth"; // your own sign-in

const talqing = new TalqingClient({
  baseUrl: "https://api.in.talqing.com",
  token: process.env.TALQING_API_KEY,
});

const AGENT_ID = "6d3f2a10-9b74-4c58-8e21-40af7c9b1d35";

export async function POST() {
  const session = await getSession();
  if (!session) return new Response("Unauthorized", { status: 401 });

  const conversation = await talqing.conversations.create({
    createTextConversationRequest: {
      contact_key: `app-user:${session.userId}`,
      agent_id: AGENT_ID,
      userdata: {
        name: session.name,
        plan: session.plan,
        account_id: session.accountId,
      },
    },
  });

  return Response.json({ conversation_id: conversation.id });
}

import { randomUUID } from "node:crypto";
import { talqing } from "@/lib/talqing";
import { getSession } from "@/lib/auth";

export async function POST(request: Request) {
  const session = await getSession();
  if (!session) return new Response("Unauthorized", { status: 401 });

  const { text, images } = (await request.json()) as {
    text: string;
    images?: { data_url: string; filename: string }[];
  };

  const sent = await talqing.conversations.messages.create({
    textMessageRequest: {
      contact_key: `app-user:${session.userId}`,
      client_message_id: randomUUID(),
      message: text,
      images: images ?? [],
    },
  });

  return Response.json({ item_id: sent.item.id });
}

import { talqing } from "@/lib/talqing";
import { getSession } from "@/lib/auth";

const AGENT_ID = "6d3f2a10-9b74-4c58-8e21-40af7c9b1d35";

export async function GET() {
  const session = await getSession();
  if (!session) return new Response("Unauthorized", { status: 401 });

  // Idempotent: the same contact_key always returns the same thread.
  const conversation = await talqing.conversations.create({
    createTextConversationRequest: {
      contact_key: `app-user:${session.userId}`,
      agent_id: AGENT_ID,
    },
  });

  // Raw byte passthrough rather than the SDK's typed iterator: nothing here
  // needs to read the frames, and re-serializing them would only add a place
  // for them to drift.
  const upstream = await fetch(
    `https://api.in.talqing.com/v1/conversations/${conversation.id}/events`,
    {
      headers: {
        Authorization: `Bearer ${process.env.TALQING_API_KEY}`,
        Accept: "text/event-stream",
      },
      cache: "no-store",
    },
  );

  return new Response(upstream.body, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache, no-transform",
      Connection: "keep-alive",
    },
  });
}

"use client";

import { useEffect, useRef, useState } from "react";

type Item = {
  id: string;
  type: string;
  role: string | null;
  direction: string;
  text: string | null;
  metadata: Record<string, unknown>;
};

type Bubble = { id: string; who: "you" | "agent"; text: string; tool?: string };

function toolNameOf(item: Item): string | undefined {
  const data = item.metadata?.data as { name?: string } | undefined;
  return data?.name;
}

export default function Chat() {
  const [bubbles, setBubbles] = useState<Bubble[]>([]);
  const [draft, setDraft] = useState("");
  const [streaming, setStreaming] = useState("");
  const [working, setWorking] = useState(false);
  const streamed = useRef("");

  useEffect(() => {
    const source = new EventSource("/api/chat/stream");

    const on = (name: string, handler: (payload: any) => void) =>
      source.addEventListener(name, (event) =>
        handler(JSON.parse((event as MessageEvent).data)),
      );

    on("conversation.snapshot", (frame) => {
      setBubbles(
        (frame.items as Item[]).flatMap((item) => {
          if (item.type === "function_call") {
            return [{ id: item.id, who: "agent" as const, text: "", tool: toolNameOf(item) }];
          }
          if (item.type !== "message" || !item.text) return [];
          return [
            {
              id: item.id,
              who: item.role === "user" ? ("you" as const) : ("agent" as const),
              text: item.text,
            },
          ];
        }),
      );
      setWorking(frame.activity.state === "running");
    });

    on("item.created", (frame: Item) => {
      if (frame.type === "function_call") {
        setBubbles((current) => [
          ...current,
          { id: frame.id, who: "agent", text: "", tool: toolNameOf(frame) },
        ]);
        return;
      }
      if (frame.type !== "message" || !frame.text) return;
      if (frame.direction === "outbound") return; // handled by assistant.completed
      setBubbles((current) => [
        ...current,
        { id: frame.id, who: "you", text: frame.text ?? "" },
      ]);
    });

    on("assistant.started", () => {
      streamed.current = "";
      setStreaming("");
      setWorking(true);
    });

    // Append. A delta is an increment, never the running total.
    on("assistant.delta", (frame) => {
      streamed.current += frame.text;
      setStreaming(streamed.current);
    });

    // `text` is every delta joined, so a client that dropped frames replaces
    // rather than reconciles.
    on("assistant.completed", (frame) => {
      const text = frame.text ?? streamed.current;
      setBubbles((current) => [
        ...current,
        { id: frame.trigger_item_id, who: "agent", text },
      ]);
      streamed.current = "";
      setStreaming("");
    });

    on("turn", (frame) => setWorking(frame.status === "running"));
    on("turn.failed", () => {
      setWorking(false);
      setStreaming("");
    });

    return () => source.close();
  }, []);

  async function send(event: React.FormEvent) {
    event.preventDefault();
    const text = draft.trim();
    if (!text) return;
    setDraft("");
    setWorking(true);
    await fetch("/api/chat/send", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text }),
    });
  }

  return (
    <div>
      {bubbles.map((bubble) =>
        bubble.tool ? (
          <p key={bubble.id}>Looking that up ({bubble.tool})…</p>
        ) : (
          <p key={bubble.id}>
            <strong>{bubble.who}:</strong> {bubble.text}
          </p>
        ),
      )}
      {streaming && (
        <p>
          <strong>agent:</strong> {streaming}
        </p>
      )}
      {working && !streaming && <p>Thinking…</p>}
      <form onSubmit={send}>
        <input value={draft} onChange={(event) => setDraft(event.target.value)} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

export const IMAGE_TYPES = ["image/jpeg", "image/png", "image/webp"];
export const MAX_IMAGE_BYTES = 10 * 1024 * 1024;
export const MAX_IMAGES_PER_MESSAGE = 4;

export function rejectionFor(file: File): string | null {
  if (!IMAGE_TYPES.includes(file.type)) return "JPEG, PNG and WebP only";
  if (file.size > MAX_IMAGE_BYTES) return "Images are 10 MB or smaller";
  return null;
}

export function readAsDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = () => reject(new Error("that image could not be read"));
    reader.readAsDataURL(file);
  });
}