Customer Support Agent

You are Acme's support assistant. Answer questions about Acme orders, shipping,
returns and billing, briefly.

- Look up an order before you answer a question about it.
- When you can't help, or the customer asks for a person, open a ticket.

- https://help.acme.com/shipping
- https://help.acme.com/returns

---
refusal: I can only help with questions about your Acme account and orders.
---

Answer questions about Acme orders, billing, shipping and returns. Refuse anything else.

import { Client, Dispatch, type ToolCall } from "@stream-io/stream-agents";
import { z } from "zod";

const agent = new Client().agent("support");

// The user whose turn made the call. It's empty when the router didn't say,
// so refuse those rather than look up orders for nobody in particular.
const customerOf = ({ user }: ToolCall) => {
  if (!user.id) throw new Error("The call doesn't say who the customer is.");
  return user.id;
};

agent.tools.register({
  name: "lookup_order",
  description: "Look up one of the customer's orders",
  parameters: z.object({ order_id: z.string() }),
  run: ({ order_id }, signal, call) => orders.find(order_id, customerOf(call)),
});

agent.tools.register({
  name: "open_ticket",
  description: "Hand the conversation over to the support team",
  parameters: z.object({ summary: z.string() }),
  run: ({ summary }, signal, call) => helpdesk.open(customerOf(call), summary),
});

await new Dispatch().host(agent).run();

import { Tools } from "@stream-io/stream-agents";

import { fetchStreamToken } from "./agent";

export const tools = new Tools().register({
  name: "issue_refund",
  description: "Refund one of the customer's orders",
  parameters: {
    type: "object",
    properties: {
      order_id: { type: "string" },
      summary: {
        type: "string",
        description: "the order and the amount, such as Order 1042, $39.90",
      },
    },
    required: ["order_id", "summary"],
  },
  displayTitle: "Refunding your order",
  approval: {
    title: "Refund this order?",
    message: "The money goes back to the card the order was paid with.",
    reasonArgument: "summary",
    allowTitle: "Refund",
    declineTitle: "Not now",
  },
  run: async ({ order_id }: { order_id: string }) => {
    const response = await fetch("https://your-backend.example.com/refunds", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${await fetchStreamToken()}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ order_id }),
    });
    if (!response.ok) throw new Error("The refund didn't go through.");
    return `Refunded order ${order_id}.`;
  },
});

import { api, type AgentChat, openConversation } from "./agent";

async function open(): Promise<AgentChat> {
  const support = api.agent("support");
  // The newest conversation held in writing. Calls are sessions of their own.
  const { items } = await support.sessions.query({
    limit: 1,
    modality: "text",
  });
  const latest = items[0];
  const session = latest
    ? await support.sessions.resume(latest.id, { tools })
    : await support.sessions.create({ tools });
  return openConversation(session);
}

let opening: Promise<AgentChat> | undefined;

/** Opens the support conversation once per launch, however often it's asked. */
export function openSupport(): Promise<AgentChat> {
  opening ??= open().catch((error: unknown) => {
    // A failed open can be tried again.
    opening = undefined;
    throw error;
  });
  return opening;
}

import { useEffect, useState } from "react";
import {
  ActivityIndicator,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import {
  AIClientIdentity,
  type AIConversationControllerState,
  AIConversationController,
  AISuggestions,
  ComposerView,
  useAIConversationState,
} from "stream-chat-react-native/ai-components";
import { AIConversation } from "stream-chat-react-native/ai-components/conversation";

import { chatClient, type AgentChat } from "./agent";
import { createAgentTransport } from "./agentTransport";
import { openSupport } from "./support";
// The voice mode button of the Voice agent use case.
import { VoiceMode } from "./VoiceMode";

const starters = [
  "Where is my order?",
  "I want to return an item",
  "Talk to a person",
];

const messageOf = (error: unknown) =>
  error instanceof Error ? error.message : String(error);

export const SupportScreen = () => {
  const [chat, setChat] = useState<AgentChat>();
  const [failure, setFailure] = useState<string>();

  useEffect(() => {
    openSupport().then(setChat, (error: unknown) =>
      setFailure(messageOf(error)),
    );
  }, []);

  if (failure) return <Text style={styles.failure}>{failure}</Text>;
  return chat ? <SupportConversation chat={chat} /> : <ActivityIndicator />;
};

const SupportConversation = ({ chat }: { chat: AgentChat }) => {
  const { channel, session } = chat;
  const [conversation] = useState(
    () =>
      new AIConversationController({
        actions: { edit: false, regenerate: false },
        approver: {
          clientId: AIClientIdentity.installId(),
          // The refund's question is answered here, through the session.
          decide: async (call, allowed) => session.decide(call.id, { allowed }),
          userId: chatClient.userID ?? "",
        },
        transport: {
          ...createAgentTransport(session, channel),
          // Ratings stay on the device unless the transport sends them.
          rate: async (reply, rating) => {
            await fetch("https://your-backend.example.com/ratings", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                sessionId: session.id,
                messageId: reply.id,
                rating,
              }),
            });
          },
        },
      }),
  );
  useEffect(() => () => conversation.dispose(), [conversation]);

  return (
    <View style={styles.container}>
      <AIConversation conversation={conversation} />
      <ComposerView
        conversation={conversation}
        header={
          <>
            <Failure conversation={conversation} />
            <Starters conversation={conversation} />
          </>
        }
        trailing={<VoiceMode conversation={conversation} session={session} />}
      />
    </View>
  );
};

const emptySelector = ({
  messages,
  pendingMessage,
}: AIConversationControllerState) => ({
  isEmpty: messages.length === 0 && !pendingMessage,
});

/** Common questions, until the conversation has a first one. */
const Starters = ({
  conversation,
}: {
  conversation: AIConversationController;
}) => {
  const { isEmpty } = useAIConversationState(conversation, emptySelector);
  if (!isEmpty) return null;
  return (
    <AISuggestions
      onSelect={(text) => conversation.send({ text })}
      suggestions={starters}
    />
  );
};

const errorSelector = ({ error }: AIConversationControllerState) => ({ error });

/** Why the latest question failed, with a way to ask again. */
const Failure = ({
  conversation,
}: {
  conversation: AIConversationController;
}) => {
  const { error } = useAIConversationState(conversation, errorSelector);
  if (!error) return null;
  return (
    <Pressable accessibilityRole="button" onPress={() => conversation.retry()}>
      <Text style={styles.failure}>{error.message}</Text>
      <Text style={styles.retry}>Try again</Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1 },
  failure: { color: "#b00020", paddingHorizontal: 24, textAlign: "center" },
  retry: { color: "#005fff", fontWeight: "600", textAlign: "center" },
});