Chat Thread

Yazma alanının çevresindeki tüm konuşma. Yanıt akarken sorunuz üstte sabitlenir, yandaki kontrol noktaları mesajlar arasında atlar ve her yanıt kopyalanabilir, düzenlenebilir, yeniden denenebilir, puanlanabilir ve sürümler arasında değiştirilebilir. Yanıtlar kod blokları, tablolar ve alıntılarla Markdown olarak render edilir; düşünme, araç çağrıları ve Prompt Input doğrudan yerine oturur.

Open in new tab

Genel bakış

Chat Thread, yazma alanının çevresindeki konuşmadır: mesajlarınız, modelin yanıtları ve onlarla yapabilecekleriniz. Boş durumunuz ve ortalanmış yazma alanıyla başlar, mesajlar olunca yazma alanını yeniden bağlamadan alta yerleştirir; böylece odak ve taslak metin yerinde kalır.

Az önce gönderdiğiniz mesaj, yanıtı altında akarken en üste çıkar ve siz uzaklaşana kadar görünüm yeni metni izler. Sağdaki kontrol noktaları şeridi, hover'da önizlemeyle mesajlarınız arasında atlamanızı sağlar. Eski geçmiş, görünüm hareket etmeden üstten yüklenir.

Kopyalamak, düzenlemek veya yeniden denemek için bir mesajın üzerine gelin. Düzenlemeler ve yeniden denemeler arasında geçiş yapabileceğiniz sürümlere dönüşür ve hiçbir şey kaybolmaz. Başarısız yanıtlar Try again sunar, durdurulmuş yanıtlar bunu belirtir ve başparmak yukarı ya da aşağı tek tıklamadır. Her yanıtın içine diğer bloklardaki Reasoning, ToolCalls ve Markdown doğrudan yerleşir.

Kurulum

Pro registry'yi components.json dosyasına ekleyin

components.json

{
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

Token'ınızı ekleyin
Hesap sayfanızda bir token oluşturun ve .env.local dosyasına HEXTAUI_PRO_TOKEN olarak ekleyin.

Bloğu ekleyin

pnpm dlx shadcn@latest add @hextaui-pro/chat-thread

Kullanım

AI SDK ile

useChat mesajlarını thread'e eşleyin. Reasoning parçaları Reasoning'e, araç parçaları ToolCalls'a, metin Markdown'a gider. Son kullanıcı mesajını sabitleyin, Try again için regenerate kullanın ve bir düzenlemeyi o noktadan yeniden gönderin.

"use client"

import { useChat } from "@ai-sdk/react"
import { getToolName, isToolUIPart, type UIMessage } from "ai"

import { PromptInput, PromptInputActions, PromptInputBody, PromptInputSubmit, PromptInputTextarea } from "../prompt-input/prompt-input"
import { Reasoning } from "../thinking/reasoning"
import { ToolCalls } from "../tool-calls/tool-group"
import { getToolPartStatus } from "../tool-calls/tool-part"
import { Markdown } from "../markdown/markdown"
import { ChatAssistantMessage, ChatThread, ChatUserMessage } from "@/components/blocks/chat-thread/chat-thread"

function textOf(message: UIMessage) {
  return message.parts.flatMap((part) => (part.type === "text" ? [part.text] : [])).join("")
}

export function Chat() {
  const { messages, status, sendMessage, regenerate, stop, setMessages } = useChat()
  const busy = status === "submitted" || status === "streaming"
  const lastUser = messages.findLastIndex((message) => message.role === "user")

  return (
    <ChatThread
      busy={busy}
      composer={
        <PromptInput status={status} onStop={stop} onSubmit={({ text }) => sendMessage({ text })}>
          <PromptInputBody>
            <PromptInputTextarea />
            <PromptInputActions>
              <PromptInputSubmit />
            </PromptInputActions>
          </PromptInputBody>
        </PromptInput>
      }
    >
      {messages.map((message, index) => {
        const last = index === messages.length - 1
        if (message.role === "user") {
          return (
            <ChatUserMessage
              key={message.id}
              id={message.id}
              text={textOf(message)}
              pin={index === lastUser}
              onEdit={(text) => {
                setMessages(messages.slice(0, index))
                sendMessage({ text })
              }}
            />
          )
        }
        const reasoning = message.parts.flatMap((part) => (part.type === "reasoning" ? [part.text] : [])).join("\n\n")
        const tools = message.parts.filter(isToolUIPart)
        const streaming = last && busy
        return (
          <ChatAssistantMessage
            key={message.id}
            id={message.id}
            text={textOf(message)}
            streaming={streaming}
            last={last}
            error={last && status === "error" ? "Something went wrong." : null}
            onRetry={last ? () => regenerate() : undefined}
          >
            {reasoning ? <Reasoning text={reasoning} streaming={streaming && !textOf(message)} /> : null}
            {tools.length > 0 ? (
              <ToolCalls
                calls={tools.map((part) => ({
                  id: part.toolCallId,
                  name: getToolName(part),
                  status: getToolPartStatus(part, { stopped: !streaming }),
                }))}
              />
            ) : null}
            <Markdown
              text={textOf(message)}
              streaming={streaming}
              sources={message.parts.flatMap((part) =>
                part.type === "source-url"
                  ? [{ id: part.sourceId, url: part.url, title: part.title ?? part.url }]
                  : []
              )}
            />
          </ChatAssistantMessage>
        )
      })}
    </ChatThread>
  )
}

Yapı

Dıştan içe doğru birleştirdiğiniz parçalar.

Parça	Açıklama
`ChatThread`	Çerçeve: kaydırıcı, kontrol noktaları, boş durum ve yazma alanı yuvası.
`ChatUserMessage`	Mesajınız: ekler, balon, saat, sürümler, kopyalama ve düzenleme.
`ChatAssistantMessage`	Bir yanıt. İçine Reasoning, ToolCalls ve Markdown koyun; eylemleri, hata ve durdurulmuş durumlarını ekler.
`ChatDivider`	Mesaj grupları arasında etiketli bir çizgi.
`ChatAttachments, ChatAction, ChatCopy, ChatBranchSwitch, ChatEditor`	Mesajların kullandığı parçalar, özel düzenler için dışa aktarılır.

API referansı

ChatThread

Prop	Tür	Varsayılan
`children`Mesajlar ve ayırıcılar, sırayla.	`ReactNode`	`–`
`composer`Genellikle Prompt Input. Boşken ortalanır, aksi halde altta yerleşir.	`ReactNode`	`–`
`empty`Mesaj olmadığında yazma alanının üstünde gösterilir.	`ReactNode`	`–`
`busy`Yanıt akarken konuşmayı yardımcı teknolojiler için meşgul olarak işaretler.	`boolean`	`false`
`hasOlder`Üstte “Load earlier messages” gösterir.	`boolean`	`false`
`loadingOlder`O düğmede bir spinner gösterir. false olunca kaydırma konumu geri yüklenir.	`boolean`	`false`
`onLoadOlder`Eski mesajları buraya ekleyin.	`() => void`	`–`

ChatUserMessage

Prop	Tür	Varsayılan
`id`Kararlı id. Görünüm zıplamasın diye sürümler arasında aynı tutun.	`string`	`–`
`text`Mesaj. Kontrol noktası önizlemesi için de kullanılır.	`string`	`–`
`pin`Bu mesaj göründüğünde onu en üste kaydırır. Yeni gönderilen mesaja ayarlayın.	`boolean`	`false`
`files`{ id, name, size?, type?, url? }. url içeren görseller küçük resim olarak gösterilir.	`ChatFile[]`	`–`
`time`Hover'da, okuyucunun yerel ayarında gösterilir.	`Date`	`–`
`branch`Sürüm okları için { index, count, onChange }.	`ChatBranch`	`–`
`onEdit`Edit gösterir. Değiştiyse yeni metinle çağrılır.	`(text: string) => void`	`–`
`attachments`Balonun üstünde özel içerik.	`ReactNode`	`–`

ChatAssistantMessage

Prop	Tür	Varsayılan
`id`Kararlı id.	`string`	`–`
`children`Reasoning, ToolCalls, Markdown ya da başka herhangi bir şey.	`ReactNode`	`–`
`text`Copy için düz metin.	`string`	`–`
`streaming`Yanıt bitene kadar eylemleri gizler.	`boolean`	`false`
`last`Eylemleri hover'da göstermek yerine görünür tutar.	`boolean`	`false`
`meta`Eylem satırının sağ tarafı, örneğin model ve efor.	`ReactNode`	`–`
`branch`Yeniden denemeler için sürüm okları.	`ChatBranch`	`–`
`feedback`Geçerli puanlama.	`"up" \| "down" \| null`	`null`
`onFeedback`Başparmakları gösterir. Bir puanlama geri alındığında null ile çağrılır.	`(feedback) => void`	`–`
`onRetry`Try again gösterir.	`() => void`	`–`
`error`Mesajı eylemler yerine Try again ile gösterir.	`string \| null`	`–`
`stopped`Erken durdurulmuş bir yanıtı işaretler.	`boolean`	`false`

ChatDivider

Prop	Tür	Varsayılan
`children`Etiket, örneğin Today veya “Switched to Nova 3 Max”.	`ReactNode`	`–`

Klavye

Tuş	Action
`Tab`	Mesajların eylemleri arasında gezinir. Yalnızca hover'da değil, odakta da görünürler.
`Enter`	Düzenlenmiş bir mesajı gönderir.
`ShiftEnter`	Düzenlerken bir satır ekler.
`Esc`	Bir düzenlemeyi iptal eder.
`↑↓PgUpPgDn`	Odaktayken konuşmayı kaydırır.

Erişilebilirlik

Konuşma, bir log barındıran etiketli bir bölgedir; böylece yeni mesajlar geldikçe duyurulur ve yanıt akarken bölge meşgul olarak işaretlenir.
Her simge eyleminin bir etiketi ve tooltip'i vardır. Başparmaklar aria-pressed kullanır, Copy ve geri bildirim polite bir live region ile onaylanır, hatalar role=alert kullanır.
Kontrol noktaları, “Message 2: …” adlı düğmelerden oluşan bir gezinti işaretidir ve geçerli olanda aria-current bulunur.
Sürüm okları “Version 1 of 2” adlı bir gruptur.
Düzenleyici kendine odaklanır, imleç sonda olur ve Cancel'da mesaja döner. Bir giriş yöntemi yazım yaparken Enter bekler.
Odak halkaları kaydırıcı tarafından asla kesilmez ve eylemler dokunmatik ekranlarda görünür kalır.

Şunlarla geliştirildi

Chat Thread bloğunun yapıldığı ücretsiz HextaUI bileşenleri. Her biri tek başına yüklenir.

Kod

2 dosya, components/blocks/chat-thread konumuna eklendi.