Render Chat

'use client'

import { Chat, ChatProvider } from '@frogbotai/ui/chat'
import { cookieFetch, createRestChatAdapter } from '@frogbotai/ui/chat/rest'

const adapter = createRestChatAdapter({ fetch: cookieFetch() })

export function SupportChat() {
  return (
    <ChatProvider adapter={adapter}>
      <div style={{ height: '100dvh' }}>
        <Chat agent="support" />
      </div>
    </ChatProvider>
  )
}

<Chat
  agent="support"
  renderSidebar={({ chats, activeChatId, selectChat }) => (
    <ChatHistory chats={chats} activeChatId={activeChatId} onChatChange={selectChat} />
  )}
/>

import { Chat, ChatDock } from '@frogbotai/ui/chat'

<Chat
  agent="support"
  dockBlocking={request !== undefined}
  dockSlot={
    request && (
      <ChatDock
        header="Allow edit?"
        footer={
          <>
            <button onClick={() => decide('deny')}>Deny</button>
            <button onClick={() => decide('allow')}>Allow</button>
          </>
        }
      >
        {request.path}
      </ChatDock>
    )
  }
/>

const [pickerOpen, setPickerOpen] = useState(false)

<Chat
  agent="support"
  onBeforeSubmit={({ text }) => {
    if (text.trim() !== '/model') return false
    setPickerOpen(true)
    return true
  }}
  composerStartSlot={<ModelSelector {...selector} open={pickerOpen} onOpenChange={setPickerOpen} />}
/>

import { compactModelSearch, matchesModelSearch, normalizeModelSearch } from '@frogbotai/ui/chat'

const values = [model.name, model.id].map((value) => ({
  normalized: normalizeModelSearch(value),
  compact: compactModelSearch(value),
}))

matchesModelSearch('sonnet', values) // true for "Claude Sonnet"

<Chat
  agent="support"
  errorContent={false}
  onError={(error) => notify(error.message)}
/>

<ChatHistory
  chats={chats}
  activeChatId={activeChatId}
  onChatChange={selectChat}
  onNewChat={() => setChatId(undefined)}
  fallbackTitle="Untitled"
  adapter={adapter}
/>

import type { MessageActionsSlotProps } from '@frogbotai/ui/chat'

function SupportMessageActions({ defaultActions, message, pending }: MessageActionsSlotProps) {
  const { saveMessage } = useSavedMessages()

  return (
    <>
      {defaultActions}
      <button type="button" disabled={pending} onClick={() => saveMessage(message)}>
        Save
      </button>
    </>
  )
}

<Chat
  agent="support"
  userMessageActions={SupportMessageActions}
  assistantMessageActions={SupportMessageActions}
/>

import {
  BranchMessageAction,
  CopyMessageAction,
  EditMessageAction,
  MessageTimestamp,
  ReadAloudMessageAction
} from '@frogbotai/ui/chat'

'use client'

import { useState } from 'react'
import { AgentSelector, Chat, ChatProvider } from '@frogbotai/ui/chat'
import { cookieFetch, createRestChatAdapter } from '@frogbotai/ui/chat/rest'

const adapter = createRestChatAdapter({ fetch: cookieFetch() })

export function AgentChat() {
  const [agent, setAgent] = useState('support')

  return (
    <ChatProvider adapter={adapter}>
      <Chat
        agent={agent}
        composerStartSlot={<AgentSelector selectedAgent={agent} onAgentChange={setAgent} />}
      />
    </ChatProvider>
  )
}

import { ComposerSelect } from '@frogbotai/ui/chat'

<ComposerSelect
  value={mode}
  options={[
    { value: 'build', label: 'Build', icon: 'wrench' },
    { value: 'plan', label: 'Plan', icon: 'check-list' },
  ]}
  onChange={setMode}
/>

'use client'

import { useState } from 'react'
import { Chat, ChatProvider, ModelSelector, useChatProvider } from '@frogbotai/ui/chat'
import { cookieFetch, createRestChatAdapter } from '@frogbotai/ui/chat/rest'

const adapter = createRestChatAdapter({ fetch: cookieFetch() })

function SupportChat() {
  const entry = useChatProvider()?.manifest?.agents.find(({ slug }) => slug === 'support')
  const [model, setModel] = useState<string>()
  const [reasoning, setReasoning] = useState<string>()

  if (!entry) return null

  const activeModel = model ?? entry.defaultModel

  return (
    <Chat
      agent="support"
      model={activeModel}
      reasoning={reasoning}
      composerStartSlot={
        <ModelSelector
          models={entry.models.map((id) => ({
            id,
            name: entry.names?.[id] ?? id,
            provider: id.includes('/') ? id.split('/')[0] : undefined,
            reasoning: entry.reasoning?.[id],
          }))}
          selectedModelId={activeModel}
          selectedReasoning={reasoning}
          onModelChange={(id) => {
            setModel(id)
            setReasoning(undefined)
          }}
          onReasoningChange={setReasoning}
        />
      }
    />
  )
}

export function ModelChat() {
  return (
    <ChatProvider adapter={adapter}>
      <SupportChat />
    </ChatProvider>
  )
}

import { PageContextButton } from '@frogbotai/ui/chat'

<Chat
  agent="support"
  composerEndSlot={
    <PageContextButton
      isLoading={false}
      getOpenTabs={getOpenTabs}
      addPageContext={addPageContext}
      removePageContext={removePageContext}
      selectedTabIds={selectedTabIds}
    />
  }
/>

ai: {
  providers: { openai: true },
  transcriptionModel: 'openai/gpt-4o-mini-transcribe',
}

ai: {
  providers: { mistral: true },
  speechModel: 'mistral/voxtral-mini-tts-latest',
}