Thread

npx shadcn add @klarhimmel/app-assistant-thread

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import AppAssistantThread from '@/components/klarhimmel/blocks/app-assistant-thread';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <AppAssistantThread props={{
          "label": "Conversation with the booking assistant",
          "state": "idle",
          "height": "auto",
          "userName": "You",
          "assistantName": "Booking assistant",
          "turns": [
            {
              "role": "user",
              "text": "Which double rooms are free on 14 and 15 November?"
            },
            {
              "role": "assistant",
              "text": "Two double rooms are free both nights at Exempelhotellet.\nRoom 204 faces the courtyard. Room 311 has a balcony and a bath.",
              "code": "204  Double, courtyard   1 190 SEK\n311  Double, balcony     1 490 SEK"
            },
            {
              "role": "user",
              "text": "Hold 311 for the Lindqvist family until Friday."
            }
          ],
          "codeLabel": "Code",
          "typing": "Writing…",
          "error": {
            "title": "The answer did not arrive",
            "message": "The connection dropped before the assistant finished. Your message is saved.",
            "retry": "Try again"
          },
          "empty": {
            "title": "Ask about rooms, rates or bookings",
            "hint": "The assistant can look things up and prepare changes. It asks before it changes anything.",
            "suggestions": [
              "Which rooms are free this weekend?",
              "Summarise today's arrivals",
              "Move booking 4821 to the 16th"
            ]
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}