Text conversations

curl -s "https://api.in.talqing.com/v1/conversations/$CONVERSATION_ID/items?order=desc&limit=20" \
  -H "Authorization: Bearer $TALQING_API_KEY" \
| jq -r '.items[] | select(.type == "message" and .direction == "outbound") | .text'

"use client";
import { useEffect, useState } from "react";
// Point this client at your own server, not at the API: a personal access token
// is a workspace credential and must never reach a browser.
import { talqing } from "./lib/talqing";

type Bubble = { id: string; role: "user" | "agent"; text: string };

export function Thread({ conversationId }: { conversationId: string }) {
  const [items, setItems] = useState<Bubble[]>([]);
  const [draft, setDraft] = useState("");
  const [working, setWorking] = useState(false);

  useEffect(() => {
    const controller = new AbortController();

    void (async () => {
      const { stream } = await talqing.conversations.events(
        { conversation_id: conversationId },
        { signal: controller.signal },
      );

      for await (const event of stream) {
        if (controller.signal.aborted) return;
        switch (event.event) {
          case "conversation.snapshot":
            // Sent first and on every reconnect: replace, never merge.
            setItems(
              event.items
                .filter((item) => item.type === "message" && item.text)
                .map((item): Bubble => ({
                  id: item.id,
                  role: item.role === "user" ? "user" : "agent",
                  text: item.text ?? "",
                })),
            );
            setWorking(event.activity.state === "running");
            setDraft("");
            break;
          case "item.created":
            if (event.type === "message" && event.text) {
              const bubble = {
                id: event.id,
                role: event.role === "user" ? ("user" as const) : ("agent" as const),
                text: event.text,
              };
              setItems((current) =>
                current.some((b) => b.id === bubble.id) ? current : [...current, bubble],
              );
            }
            break;
          case "assistant.started":
            setWorking(true);
            setDraft("");
            break;
          case "assistant.delta":
            setDraft((current) => current + event.text);
            break;
          case "assistant.completed":
            // The finished item arrives as its own `item.created`.
            setDraft("");
            break;
          case "turn":
            if (event.status !== "running") setWorking(false);
            break;
          case "turn.failed":
            setWorking(false);
            setDraft("");
            console.error(event.message);
            break;
        }
      }
    })();

    return () => controller.abort();
  }, [conversationId]);

  return (
    <ul>
      {items.map((bubble) => (
        <li key={bubble.id}>
          <strong>{bubble.role}</strong> {bubble.text}
        </li>
      ))}
      {draft ? <li key="draft">{draft}</li> : null}
      {working && !draft ? <li key="working">Thinking…</li> : null}
    </ul>
  );
}

{
  "contact_key": "user-42",
  "client_message_id": "b1c9c8a2-7c4b-4f5e-9a0d-4c1c2a3b4d5e",
  "message": "Is this the right part?",
  "images": [
    { "data_url": "data:image/jpeg;base64,/9j/4AAQSkZJRg...", "filename": "part.jpg" }
  ]
}