一、 前言

在前幾天的文章中，我們的「AI 酒館」已經成功串接了 Google Gemini API，讓調酒師 Mark 與吟遊詩人 Bard 擁有了即時對話的靈魂。不過，當玩家按下送出後，AI 的回覆常常是一瞬間整段文字「蹦」出來，少了一點真實對話的呼吸感。 為了讓酒館的沉浸感更上一層樓，今天的核心任務是實作兩個前端體驗的靈魂細節：打字機特效（Typing Effect） 與 聊天室自動捲動（Auto-scroll）。

二、 為什麼前端細節對 Vibe Coding 專案至關重要？

在打造 AI 應用時，介面的互動反饋往往決定了產品的精緻度：打字機特效：模仿真人打字的速度逐字顯示文字，能給予玩家心理上的期待感，並降低一次性載入大量文字的突兀感。自動捲動：當對話變長時，若玩家需要手動往下滑才能看到新訊息會非常打折。讓聊天室自動貼底，能維持流暢的視線焦點。

三、 實作步驟與核心程式碼

下達 Vibe Coding 需求我們透過 AI 助手在前端對話組件中加入了逐字顯示的計時器（Timer / interval）邏輯，並利用 useRef 與 scrollIntoView 達成自動捲動。核心打字機邏輯實作前端處理逐字渲染的程式碼概念大致如下：TypeScriptimport { useState, useEffect } from 'react';

export function useTypewriter(text: string, speed: number = 30) {
const [displayedText, setDisplayedText] = useState('');

useEffect(() => {
let i = 0;
setDisplayedText('');
const timer = setInterval(() => {
if (i < text.length) {
setDisplayedText((prev) => prev + text.charAt(i));
i++;
} else {
clearInterval(timer);
}
}, speed);

return () => clearInterval(timer);

}, [text, speed]);

return displayedText;
}
自動捲動配置在訊息列表的最下方放置一個隱藏的錨點（Anchor），當每次 messages 陣列更新時，觸發自動滑動：TypeScriptconst messagesEndRef = useRef(null);

const scrollToBottom = () => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
};

useEffect(() => {
scrollToBottom();
}, [messages, displayedText]);

四、 今日心得與預告

今日心得：加上打字機特效與自動捲動後，整個酒館的氛圍瞬間變得非常生動，彷彿對面真的坐了一個正在思考並回應你的酒保！這就是前端微調的魔力。明日預告 (Day 07)：【架構】歷史對話紀錄持久化！利用瀏覽器的 localStorage 讓玩家重新整理網頁後，對話記憶也不會遺失！