Introduction

"use client";

import { Button, Group, Paper, Text } from "@mantine/core";
import { AgentChat, type CustomToolRendererProps } from "@sinups/ai-kit";
import type { ChatMessage } from "@sinups/ai-kit";

const messages: ChatMessage[] = [/* streamed from your backend */];

// Built-in cards (tool-Bash, tool-Edit, tool-Grep, tool-mcp__<server>__<tool>, ...) render automatically.
// toolRenderers adds or replaces cards by the full part type.
function DeployCard({ input, status, onAction }: CustomToolRendererProps) {
  return (
    <Paper withBorder p="xs">
      <Group justify="space-between">
        <Text size="sm">Deploy {String(input.service)} · {status}</Text>
        <Button size="xs" onClick={() => onAction?.("approve")}>Approve</Button>
      </Group>
    </Paper>
  );
}

export default function Chat() {
  return (
    <AgentChat
      messages={messages}
      status="ready"
      onSend={() => {}}
      onStop={() => {}}
      toolRenderers={{ "tool-Deploy": DeployCard }}
    />
  );
}

"use client";

import { InputBar, ModeSelector, ModelPicker } from "@sinups/ai-kit";
import { IconBulb, IconCursor } from "@tabler/icons-react";

const modes = [
  { id: "agent", label: "Agent", icon: IconCursor },
  { id: "plan", label: "Plan", icon: IconBulb },
];

const models = [
  { id: "llama-3.3-70b", name: "Llama 3.3", version: "70B" },
  { id: "qwen-2.5-coder-32b", name: "Qwen 2.5 Coder", version: "32B" },
];

export default function Composer() {
  return (
    <InputBar
      status="ready"
      onSend={({ content }) => console.log(content)}
      onStop={() => {}}
      leftActions={
        <>
          <ModeSelector modes={modes} defaultValue="agent" />
          <ModelPicker models={models} defaultValue="llama-3.3-70b" />
        </>
      }
    />
  );
}