Function ChatPage

examples/ts-solid-chat/src/routes/index.tsx:308–401

()

}

function ChatPage() {
  const [chunks, setChunks] = createSignal<Array<any>>([])

  const { messages, sendMessage, isLoading, addToolApprovalResponse, stop } =
    useChat({
      connection: chatOptions.connection,
      tools: clientTools,
      onChunk: (chunk: any) => {
        setChunks((prev) => [...prev, chunk])
      },
    })
  const [input, setInput] = createSignal('')

  const clearChunks = () => setChunks([])

  return (
    <div class="flex h-[calc(100vh-72px)]  bg-gray-900">
      {/* Left side - Chat (1/4 width) */}
      <div class="w-1/2 flex flex-col border-r border-orange-500/20">
        <div class="p-4 border-b border-orange-500/20">
          <h1 class="text-2xl font-bold bg-linear-to-r from-orange-500 to-red-600 text-transparent bg-clip-text">
            TanStack AI on SolidJS
          </h1>
        </div>

        <Messages
          messages={messages()}
          addToolApprovalResponse={addToolApprovalResponse}
        />

        <ChatInputArea>
          <div class="space-y-3">
            {isLoading() && (
              <div class="flex items-center justify-center">
                <button
                  onClick={stop}
                  class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
                >
                  <Square class="w-4 h-4 fill-current" />
                  Stop
                </button>
              </div>
            )}
            <div class="relative">
              <textarea
                value={input()}
                placeholder="Type something"
                class="w-full rounded-lg border border-orange-500/20 bg-gray-800/50 pl-4 pr-12 py-3 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:border-transparent resize-none overflow-hidden shadow-lg"
                rows={1}
                style={{ 'min-height': '44px', 'max-height': '200px' }}
                disabled={isLoading()}
                onInput={(e) => {
                  const target = e.target as HTMLTextAreaElement
                  target.style.height = 'auto'
                  target.style.height =
                    Math.min(target.scrollHeight, 200) + 'px'
                  setInput(target.value)
                }}