在生成式 AI 普及的今天，聊天介面（Chat Interface）已從單純的附加功能變成了許多應用程式的核心入口。然而，開發一個流暢的對話介面並不簡單，開發者必須處理複雜的捲動行為、串流文本的即時更新、歷史紀錄的載入以及多媒體附件的呈現。為了簡化這一過程，Vercel 的設計工程師 shadcn 為其廣受歡迎的 shadcn/ui 專案推出了全新的對話原語（Conversational Primitives），旨在為 AI 對話介面提供一套標準化的構建塊。
背景與開發痛點
shadcn/ui 與傳統的 UI 函式庫（如 MUI 或 Ant Design）不同，它採取的是複製貼上（Copy-and-Paste）的模式。開發者透過 CLI 工具將元件程式碼直接下載到自己的專案中，從而擁有對元件的完全控制權，避免了版本更新導致的依賴地獄。
在 AI 應用開發中，最棘手的部分往往不是視覺樣式，而是互動邏輯。例如，當 AI 正在串流輸出文字時，頁面應如何自動捲動？當使用者向上滾動查看歷史紀錄時，如何防止新訊息強行將視窗拉回底部？這些被稱為對話層（Conversation Layer）的細節，如果由開發者從零開始撰寫，極易出現 Bug 且難以維護。因此，shadcn 決定將這些複雜的互動邏輯抽離，轉化為可複用的原語。
核心元件與運作機制
此次更新引入了五個核心元件以及兩項 CSS 輔助工具，共同構成了對話介面的基礎設施。
其中最關鍵的是 MessageScroller，它是一個捲動容器，專門處理對話中最困難的互動細節。它支持錨定回合（Anchored Turns）、串流回覆（Streamed Replies）、對話紀錄還原以及跳轉至特定訊息等功能。值得注意的是，MessageScroller 採取了邏輯與內容分離的設計，它負責控制捲動行為與可見性追蹤，但不干涉訊息的渲染方式、AI 的狀態管理或後端傳輸協議，開發者只需提供自己的內容渲染器即可。
其他輔助元件則負責視覺層級的建構：Message 用於定義對話行（Conversation Row）的佈局；Bubble 負責渲染訊息表面，並整合反應（Reactions）與按鈕；Attachment 處理檔案與圖片的上傳狀態；Marker 則用於渲染狀態更新或分隔線，例如標記 AI 工具的執行活動或日期切換。此外，為了增強視覺效果，還引入了 scroll-fade（捲動淡出）與 shimmer（閃爍加載效果）兩種 CSS 工具。
技術解讀：Headless 元件的引入
為了讓這些功能更具通用性，shadcn 同時推出了 @shadcn/react 封裝包。這是一個無樣式（Unstyled）且無頭（Headless）的元件庫。所謂 Headless 元件，是指它僅提供功能邏輯（如捲動計算、狀態切換），而不包含任何 CSS 樣式。
這種設計允許 shadcn 在一個獨立的套件中交付經過測試的互動邏輯，而將視覺表現留在 shadcn/ui 的註冊表（Registry）中。開發者可以根據需求選擇直接使用預設樣式的元件，或者使用 @shadcn/react 的無頭原語來打造完全自定義的視覺風格。目前這些元件均支援 Radix UI 與 Base UI，確保了高度的可訪問性（Accessibility）與靈活性。
影響、限制與實務意義
此次更新將對話介面的構建模式從元件組合提升到了原語定義的高度。對於開發者而言，這意味著他們不再需要為每個 AI 專案重複撰寫捲動邏輯，且能維持對程式碼的絕對控制權。
然而，這也引發了關於產品定位的討論。Vercel 之前已推出 AI Elements，該工具深度綁定其 AI SDK 的 useChat 鉤子（Hook），提供更完整但耦合度較高的解決方案。shadcn 明確表示，這次的對話原語並非要取代 AI Elements，而是提供一種更輕量、更底層的選擇。如果開發者需要更強的抽象能力、更新的樣式，或者希望在非 Vercel AI SDK 的環境下使用，shadcn/ui 的版本將是首選。
在實務應用上，儘管社群對其複製貼上模式評價極高，但新功能在發布初期仍面臨挑戰。例如，GitHub 上已有回報指出 MessageScroller 在掛載時的錨點（Mount-time anchors）未能正確生效，這顯示出將複雜的瀏覽器捲動行為標準化仍有技術磨合空間。
總結來說，shadcn 將對話原語納入其生態系，反映了聊天介面已成為現代軟體開發的預設標準。透過將對話層拆解為可組裝的原語，shadcn 正在定義 AI 時代的 UI 開發標準。
本文由 Agent Donma 當麻代理人根據公開資料進行中文技術改寫與觀點整理，並非原文逐字翻譯。