Tools

import { useQuery } from '@tanstack/react-query';
import { readToolCalls } from 'kizunajs';
import { api } from '../api';

export function Chat({ prompt }: { prompt: string }) {
    const { data } = useQuery(
        api.assistant.reply.streamOptions({
            input: {
                body: {
                    prompt,
                },
            },
        })
    );

    const messages = data ?? [];

    return (
        <article>
            {readToolCalls(messages).map((call) => (
                <ToolCallView key={call.id} call={call} />
            ))}
            <p>{messages.flatMap((message) => (message.event === 'delta' ? [message.data.text] : [])).join('')}</p>
        </article>
    );
}

import type { ToolCallRecord } from 'kizunajs';

type Call = ToolCallRecord<AssistantMessage>;

export function ToolCallView({ call }: { call: Call }) {
    switch (call.name) {
        case 'charts.plotSignups':
            return call.state === 'done' ? <SignupChart points={call.output.points} /> : <ChartSkeleton />;
        default:
            return <ToolPill name={call.name} state={call.state} />;
    }
}

@Observable
@MainActor
final class ChatModel {
    var messages: [AssistantReply.Event] = []

    func send(_ prompt: String) async throws {
        messages = []
        let result = try await client.assistantReply(body: .init(prompt: prompt))

        for try await event in result.body {
            messages.append(event)
        }
    }
}

import APIClient

struct ChatView: View {
    @State private var model = ChatModel()

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            ForEach(APIClient.AssistantReply.readToolCalls(model.messages)) { call in
                ToolCallView(call: call)
            }
            Text(model.messages.text)
        }
    }
}

struct ToolCallView: View {
    let call: ToolCallRecord

    var body: some View {
        switch call.name {
        case "charts.plotSignups":
            SignupChart(points: call.points)
        default:
            ToolPill(name: call.name, state: call.state)
        }
    }
}

class ChatViewModel(private val client: APIClient) : ViewModel() {
    private val _messages = MutableStateFlow(emptyList<Event>())
    val messages: StateFlow<List<Event>> = _messages.asStateFlow()

    fun send(prompt: String) = viewModelScope.launch {
        _messages.value = emptyList()
        client.assistantReply(AssistantReplyBody(prompt)).body.collect { event ->
            _messages.update { it + event }
        }
    }
}

import com.kizuna.demo.APIClient

@Composable
fun ChatScreen(model: ChatViewModel = viewModel()) {
    val messages by model.messages.collectAsStateWithLifecycle()

    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
        APIClient.AssistantReply.readToolCalls(messages).forEach { call -> ToolCallView(call) }
        Text(messages.text())
    }
}

@Composable
fun ToolCallView(call: ToolCallRecord) {
    when (call.name) {
        "charts.plotSignups" -> SignupChart(call.points)
        else -> ToolPill(call.name, call.state)
    }
}

if (message.event === 'tool_result') {
    switch (message.data.name) {
        case 'charts.plotSignups':
            // { points: Array<{ date: string; signups: number }> }
            points = message.data.output.points;
            break;
        case 'weather.getForecast':
            // { temperature: number; unit: 'celsius' | 'fahrenheit'; summary: string }
            temperature = message.data.output.temperature;
            break;
        case 'countWords':
            // { words: number }
            words = message.data.output.words;
            break;
    }
}

case .tool_result(let result):
    switch result {
    case .charts_plotSignups(let plotted):
        points = plotted.output.points
    case .weather_getForecast(let forecast):
        temperature = forecast.output.temperature
    case .countWords(let counted):
        words = counted.output.words
    }

is Event.ToolResult -> when (val result = event.data) {
    is ToolResult.Charts_plotSignups -> points = result.value.output.points
    is ToolResult.Weather_getForecast -> temperature = result.value.output.temperature
    is ToolResult.CountWords -> words = result.value.output.words
}