Quickstart

import "@stream-io/stream-agents/chat";
import type { Session } from "@stream-io/stream-agents";
import { useMemo } from "react";
import type { Channel as ChatChannel, StreamChat } from "stream-chat";
import {
  AIStateIndicator,
  Channel,
  Chat,
  MessageComposer,
  MessageList,
  WithComponents,
} from "stream-chat-react";
import "stream-chat-react/css/index.css";

// The agent's replies carry `ai_generated: true`.
declare module "stream-chat" {
  interface CustomMessageData {
    ai_generated?: boolean;
  }
}

/** Opens the session's channel, as the chat's views show it. */
export async function openChat(session: Session) {
  // `session.chat()` connects to Stream Chat with the user set above.
  const { client, channel } = await session.chat();
  return {
    session,
    client: client as StreamChat,
    channel: channel as ChatChannel,
  };
}

export type AgentChat = Awaited<ReturnType<typeof openChat>>;

export const AgentConversation = ({ chat }: { chat: AgentChat }) => {
  // While the agent answers, the composer shows a Stop button. Its default sends
  // `ai_indicator.stop` to the channel, which the agent does not act on, so stop
  // the reply through the session instead.
  const StopButton = useMemo(
    () => () => (
      <button
        aria-label="Stop"
        className="str-chat__stop-ai-generation-button"
        onClick={() => chat.session.interrupt()}
        type="button"
      />
    ),
    [chat.session],
  );

  return (
    <Chat
      client={chat.client}
      // Renders the agent's replies as streaming markdown.
      isMessageAIGenerated={(message) => Boolean(message.ai_generated)}
    >
      <WithComponents overrides={{ StopAIGenerationButton: StopButton }}>
        <Channel channel={chat.channel}>
          <MessageList />
          {/* Thinking and generating states, for text and voice sessions. */}
          <AIStateIndicator />
          <MessageComposer
            overrideSubmitHandler={async ({ message }) => {
              await chat.session.responses.create(message.text ?? "");
            }}
          />
        </Channel>
      </WithComponents>
    </Chat>
  );
};

import android.content.Context
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.lifecycleScope
import io.getstream.chat.android.ai.compose.conversation.AIMessage
import io.getstream.chat.android.ai.compose.conversation.AIMessageRole
import io.getstream.chat.android.ai.compose.parts.AIClientIdentity
import io.getstream.chat.android.ai.compose.parts.AIMessagePart
import io.getstream.chat.android.ai.compose.ui.component.AIConversation
import io.getstream.chat.android.ai.compose.ui.component.AIToolApprover
import io.getstream.chat.android.ai.compose.ui.component.ChatComposer
import io.getstream.chat.android.client.channel.state.ChannelState
import io.getstream.chat.android.models.Message
import io.getstream.agents.android.core.AgentSession
import io.getstream.agents.android.core.AgentsException
import io.getstream.agents.android.core.Conversation
import io.getstream.agents.android.core.channelState
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.ExperimentalCoroutinesApi
import kotlinx.coroutines.flow.SharingStarted
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.combine
import kotlinx.coroutines.flow.flatMapLatest
import kotlinx.coroutines.flow.flowOf
import kotlinx.coroutines.flow.map
import kotlinx.coroutines.flow.stateIn
import kotlinx.coroutines.launch

// In your activity, with the session from step 3.
lifecycleScope.launch {
    val chat = AgentChat.open(this@MainActivity, session, lifecycleScope)
    setContent { AgentConversation(chat, Modifier.fillMaxSize()) }
}

@Composable
fun AgentConversation(chat: AgentChat, modifier: Modifier = Modifier) {
    val messages by chat.messages.collectAsStateWithLifecycle()
    val answering by chat.isAnswering.collectAsStateWithLifecycle()

    Column(modifier) {
        // Each question moves to the top, and its reply streams in below it with its
        // reasoning and tool calls.
        AIConversation(
            messages = messages,
            modifier = Modifier.weight(1f),
            // The agent is on it, and its reply isn't in the channel yet.
            isThinking = answering && messages.lastOrNull()?.role != AIMessageRole.Assistant,
            // Asks the user before a tool that asks first runs.
            approver = chat.approver,
        )
        ChatComposer(
            // The agent does not answer a message sent to the channel: ask the session.
            onSendClick = { chat.send(it.text) },
            onStopClick = chat::stop,
            // While the agent answers, the composer shows a Stop button.
            isGenerating = answering,
        )
    }
}

/** The session's channel, as the AI components show it. */
@OptIn(ExperimentalCoroutinesApi::class)
class AgentChat private constructor(
    val session: AgentSession,
    val approver: AIToolApprover,
    channel: StateFlow<ChannelState?>,
    private val scope: CoroutineScope,
) {
    /** The channel's messages, oldest first, as Stream Chat keeps them up to date. */
    val messages: StateFlow<List<AgentMessage>> = channel
        .flatMapLatest { it?.messages ?: flowOf(emptyList()) }
        .map { messages -> messages.filter { it.deletedAt == null }.map(::AgentMessage) }
        .stateIn(scope, SharingStarted.Eagerly, emptyList())

    /** Whether a reply is on its way, from the first thought to the last word. */
    val isAnswering: StateFlow<Boolean> = combine(session.conversation, messages) { conversation, messages ->
        when (conversation.state) {
            Conversation.State.Responding, is Conversation.State.Working -> true
            else -> messages.lastOrNull()?.isGenerating == true
        }
    }.stateIn(scope, SharingStarted.Eagerly, false)

    fun send(text: String) {
        scope.launch {
            try {
                session.responses.create(text)
            } catch (_: AgentsException) {
                // Not sent: the user can send it again.
            }
        }
    }

    /** Stops the reply in flight. What was written so far is kept. */
    fun stop() {
        scope.launch {
            try {
                session.interrupt()
            } catch (_: AgentsException) {
                // The reply finished first.
            }
        }
    }

    companion object {
        /** Opens the session's channel. Pass a [scope] on the main thread, such as `lifecycleScope`. */
        suspend fun open(context: Context, session: AgentSession, scope: CoroutineScope): AgentChat {
            // The user set above, who answers the calls the agent addresses to them.
            val approver = AIToolApprover("jlahey", AIClientIdentity.installId(context), scope) { call, allowed ->
                session.decide(call.id, allowed)
            }
            // Connects to Stream Chat as the user set above and watches the session's channel.
            return AgentChat(session, approver, session.channelState(context, scope), scope)
        }
    }
}

/** A message of the channel, as the AI components show it. */
data class AgentMessage(val message: Message) : AIMessage {
    override val id: String = message.id
    // The agent's replies carry `ai_generated: true`.
    override val role: AIMessageRole =
        if (message.extraData["ai_generated"] == true) AIMessageRole.Assistant else AIMessageRole.User
    override val text: String = message.text
    override val isGenerating: Boolean = message.extraData["generating"] == true
    // The reply's reasoning and tool calls, which the router writes as its attachments. Stream Chat
    // lifts `name` out of an attachment's fields, and a tool call's step needs it back.
    override val parts: List<AIMessagePart> = AIMessagePart.parts(
        message.attachments.map { it.type.orEmpty() to it.extraData + ("name" to it.name) },
    )
}

import Combine
import StreamChat
import StreamChatAI
import SwiftUI
import StreamAgents

/// Opens a session with the agent, and shows it once its channel is open.
struct AgentScreen: View {
    @State private var transport: AgentTransport?

    var body: some View {
        if let transport {
            AgentConversation(transport: transport)
        } else {
            ProgressView()
                .task { transport = try? await AgentTransport(startSession()) }
        }
    }
}

struct AgentConversation: View {
    @StateObject private var conversation: AIConversation<AgentMessage>

    init(transport: AgentTransport) {
        _conversation = StateObject(
            wrappedValue: AIConversation(transport: transport, approver: transport.approver)
        )
    }

    var body: some View {
        // Each question moves to the top, and its reply streams in below it with its
        // reasoning and tool calls. While the agent writes, the composer shows a Stop button.
        AIConversationView(conversation: conversation)
            .safeAreaInset(edge: .bottom) {
                AIComposerView(conversation: conversation)
            }
    }
}

/// Connects the AI components to the session: they show its channel, and ask the session.
@MainActor
final class AgentTransport: AIConversationTransport {
    let session: AgentSession
    private let channel: ChatChannelController
    private var subscription: AnyCancellable?

    init(_ session: AgentSession) async throws {
        self.session = session
        // `session.chat()` connects to Stream Chat as the user set above and opens the session's channel.
        channel = try await session.chat()
        // The session's socket, which stops a reply and runs the tools this phone offers.
        await session.start()
    }

    func connect(_ feed: AIConversationFeed<AgentMessage>) {
        // The channel lists its messages newest first, the conversation oldest first.
        let publish = { [channel] in
            feed.update(messages: channel.messages.reversed().map(AgentMessage.init))
        }
        subscription = channel.messagesChangesPublisher.sink { _ in publish() }
        channel.synchronize { _ in publish() }
    }

    // The agent does not answer a message sent to the channel: ask the session.
    func send(_ request: AIConversationRequest<AgentMessage>) async throws {
        _ = try await session.responses.create(request.text)
    }

    func stop() async throws {
        try await session.interrupt()
    }

    /// Answers the tools that ask before they run.
    var approver: AIToolApprover {
        AIToolApprover(userID: agents.backend.user?.id ?? "", clientID: AIClientIdentity.installID) { call, allowed in
            try await self.session.decide(call.id, allowed: allowed)
        }
    }
}

/// A message of the channel, as the AI components show it.
struct AgentMessage: AIMessage {
    let message: ChatMessage

    var id: MessageId { message.id }
    // The agent's replies carry `ai_generated: true`.
    var role: AIMessageRole {
        message.extraData["ai_generated"]?.boolValue == true ? .assistant : .user
    }
    var text: String { message.text }
    var isGenerating: Bool { message.extraData["generating"]?.boolValue == true }
    // The reply's reasoning and tool calls, which the router writes as its attachments.
    var parts: [AIMessagePart] {
        AIMessagePart.parts(from: message.allAttachments.map { ($0.type.rawValue, $0.payload) })
    }
}