優化 SidePanel 的 UI，將其轉變為對話機器人的界面，並探索更多與 LLM 結合的可能性

本篇延續上篇文章如何用 WXT 和 LangChain 快速打造具備 SidePanel 的 AI Chrome 擴充功能，將 SidePanel 擴充優化為「類 ChatGPT」對話介面，並加入 LLM 設定功能，探索如何結合 LangChain 與 Chrome Extension 打造更智慧的 AI 助手。

實作 類 ChatGPT」對話介面，並加入 LLM 設定功能

網路上有許多的 Chat UI ，例如 run-llama/chat-ui, reactchat 及 Ant Design X 等其他類似工具，本專案採用 Ant Design X 來建立對話機器人的界面，因為它使用起來相對比較容易。

1.安裝套件
首先，我們需要安裝 @ant-design/x 和 @ant-design/v5-patch-for-react-19 (如果使用 react 19 要安裝這個套件) 及其他需要的套件：

npm install @ant-design/x @ant-design/v5-patch-for-react-19 dayjs markdown-it

2.建立 Header (entrypoints/sidepanel/ChatHeader.tsx)
Header 包含標題、新對話按鈕及開啟設定按鈕：

import { Button, Space } from "antd";
import { PlusOutlined, SettingOutlined } from "@ant-design/icons";

interface ChatHeaderProps {
  onNewSession?: () => void;
  openSettings?: () => void;
}

const ChatHeader = ({ onNewSession, openSettings }: ChatHeaderProps) => {
  return (
    <div className="chat-header">
      <div className="chat-header-title">✨ AI Copilot</div>
      <Space size={0}>
        <Button
          type="text"
          icon={<PlusOutlined />}
          onClick={onNewSession}
          className="chat-header-button"
        />
        <Button
          type="text"
          icon={<SettingOutlined />}
          onClick={openSettings}
          className="chat-header-button"
        />
      </Space>
    </div>
  );
};

export default ChatHeader;

3.建立設定畫面 (entrypoints/sidepanel/SettingsPanel.tsx)
建立簡單的 LLM 設定畫面，包含 apiUrl, apiKey, model 輸入框及存檔/取消按鈕：

import { Card, Input, Button, message, Form, Space } from "antd";

interface SettingsPanelProps {
  onClose: (isSaved: boolean) => void;
}

const SettingsPanel = ({ onClose }: SettingsPanelProps) => {
  const [form] = Form.useForm();
  useEffect(() => {
    chrome.storage.local.get(["apiUrl", "apiKey", "model"], (result) => {
      console.log(result);
      form.setFieldsValue({
        apiUrl: result.apiUrl || "",
        apiKey: result.apiKey || "",
        model: result.model || "gpt-4.1",
      });
    });
  }, [form]);

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      console.log("取得的值:", values);
      chrome.storage.local.set(values, () => {
        message.success("設定已儲存！");
        onClose(true);
      });
    } catch (errorInfo) {
      console.log("Save Error", errorInfo);
      message.error("Save Error");
    }
  };

  const handleCancel = () => {
    form.resetFields();
    message.info("已取消變更");
    onClose(false);
  };

  return (
    <Card title="✨ AI Copilot LLM 設定">
      <Form form={form} layout="vertical" onFinish={handleSave}>
        <Form.Item
          label="API URL"
          name="apiUrl"
          rules={[{ required: false, message: "請輸入 API URL" }]}
        >
          <Input placeholder="例如：https://api.example.com" />
        </Form.Item>

        <Form.Item
          label="API Key"
          name="apiKey"
          rules={[{ required: true, message: "請輸入 API Key" }]}
        >
          <Input.Password placeholder="請輸入你的 API Key" />
        </Form.Item>

        <Form.Item
          label="Model Name"
          name="model"
          rules={[{ required: true, message: "請輸入 Model" }]}
        >
          <Input placeholder="gpt-4.1" />
        </Form.Item>

        <Form.Item>
          <Space style={{ width: "100%", justifyContent: "space-between" }}>
            <Button onClick={handleCancel} block>
              取消
            </Button>
            <Button type="primary" htmlType="submit" block>
              儲存設定
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default SettingsPanel;

4.建立對話 UI(entrypoints/sidepanel/ChatUi.tsx)
主要的 UI 包含 Header、訊息歷史（顯示過往對話）以及對話框（用於輸入新訊息）。
使用 markdown 格式來顯示對話(renderMarkdown), rolesAsObject 是用來設定訊息依不同角色設定不同的顏色及 icon。
當設定完成後或是 Tab URL 有改變時，要重新建立新的 Agent。
使用者輸入訊息，按下送出後，會透過 Agent 來處理(agentRef.current.invoke)。

import { Bubble, Sender, BubbleProps } from "@ant-design/x";
import { UserOutlined, RobotOutlined } from "@ant-design/icons";
import { createChatAgent } from "@/utils/agents";
import type { GetProp } from "antd";
import ChatHeader from "./ChatHeader";
import SettingsPanel from "./SettingsPanel";
import type { Conversation } from "@ant-design/x/es/conversations";
import dayjs from "dayjs";
import markdownit from "markdown-it";
import { Typography } from "antd";
import { agentConfig } from "@/utils/types/agentConfig";
import { TAB_URL_CHANGED } from "@/utils/types/message";

const md = markdownit({ html: false, breaks: true });
const ROLE_AI = "assistant";
const ROLE_HUMAN = "user";

const renderMarkdown: BubbleProps["messageRender"] = (content) => {
  //console.log("content", content);
  return (
    <Typography>
      <div dangerouslySetInnerHTML={{ __html: md.render(content) }} />
    </Typography>
  );
};

const rolesAsObject: GetProp<typeof Bubble.List, "roles"> = {
  assistant: {
    placement: "start",
    avatar: {
      icon: <RobotOutlined />,
      style: { background: "#398eff", margin: 2 },
    },
    typing: { step: 5, interval: 20 },
    styles: {
      content: { margin: 2 },
    },
    messageRender: renderMarkdown,
  },
  user: {
    placement: "end",
    avatar: {
      icon: <UserOutlined />,
      style: { background: "#87d068", margin: 2 },
    },
    styles: {
      content: { margin: 2 },
    },
  },
};

export default function ChatUi() {
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [controller, setController] = useState<AbortController | null>(null);
  const [messages, setMessages] = useState<Array<BubbleProps>>([]);
  const [sessionList, setSessionList] = useState<Conversation[]>([]);
  const [curSession, setCurSession] = useState<string>();
  const [showSettings, setShowSettings] = useState(false);
  const [apiSettings, setApiSettings] = useState<agentConfig>({
    apiUrl: "",
    apiKey: "",
    model: "",
  });

  const agentRef = useRef<any>(null);
  const apiSettingsRef = useRef(apiSettings);

  useEffect(() => {
    newSession();
    loadSettingsFromStorage();
    function handleMessage(message: any, sender: any, sendResponse: any) {
      if (message.type === TAB_URL_CHANGED) {
        agentRef.current = createChatAgent(apiSettingsRef.current, message.url);
      }
    }
    chrome.runtime.onMessage.addListener(handleMessage);
    return () => chrome.runtime.onMessage.removeListener(handleMessage);
  }, []);

  useEffect(() => {
    apiSettingsRef.current = apiSettings;
  }, [apiSettings]);

  const loadSettingsFromStorage = () => {
    chrome.storage.local.get(["apiUrl", "apiKey", "model"], (result) => {
      const settings = {
        apiUrl: result.apiUrl || "",
        apiKey: result.apiKey || "",
        model: result.model || "",
      };
      setApiSettings(settings);

      // 建立 agent 並存入 useRef
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        const url = tabs[0]?.url || "";
        agentRef.current = createChatAgent(settings, url);
      });
    });
  };
  const newSession = () => {
    const timeNow = dayjs().valueOf().toString();
    setSessionList([
      { key: timeNow, label: "New session", group: "Today" },
      ...sessionList,
    ]);
    setCurSession(timeNow);
    setMessages([]);
  };

  const handleSubmit = async () => {
    const newController = new AbortController();

    setController(newController);
    setIsLoading(true);
    let query = input;
    setMessages((prevMessages) => [
      ...prevMessages,
      {
        content: query,
        role: ROLE_HUMAN,
      },
    ]);

    try {
      const agentOutput = await agentRef.current.invoke(
        {
          messages: [
            {
              role: ROLE_HUMAN,
              content: query,
            },
          ],
        },
        { signal: newController.signal }
      );
      var text = agentOutput.messages[agentOutput.messages.length - 1].content;
      setMessages((prevMessages) => [
        ...prevMessages,
        {
          content: text,
          role: ROLE_AI,
        },
      ]);
      console.log(text);
      setInput("");
    } catch (error) {
      console.error("Error during agent.invoke:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleCancel = () => {
    if (controller) {
      console.log("Aborting request...");
      controller.abort(); // 中止當前請求
      setController(null); // 清除 controller
    }
  };
  const handleSettingsClick = () => {
    setShowSettings(true);
  };

  const handleCloseSettings = (isSaved: boolean) => {
    if (isSaved) loadSettingsFromStorage();
    setShowSettings(false);
  };
  const mainContent = !showSettings ? (
    <div className="chat-container">
      <ChatHeader
        onNewSession={newSession}
        openSettings={handleSettingsClick}
      />
      <Bubble.List items={messages} roles={rolesAsObject}></Bubble.List>
      <Sender
        value={input}
        onChange={setInput}
        loading={isLoading}
        placeholder="請輸入訊息..."
        onSubmit={handleSubmit}
        onCancel={handleCancel}
      />
    </div>
  ) : (
    <SettingsPanel onClose={handleCloseSettings} />
  );

  return <>{mainContent}</>;
}

在utils\types\message.ts中加入export const TAB_URL_CHANGED = "TAB_URL_CHANGED";

5.在entrypoints\background.ts中加入當前頁面 URL 變化時，發送TAB_URL_CHANGED事件

import { TAB_URL_CHANGED } from "@/utils/types/message";

export default defineBackground({
  main() {
    chrome.runtime.onInstalled.addListener(() => {
      chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
    });

    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
      if (changeInfo.url) {
        chrome.runtime.sendMessage({
          type: TAB_URL_CHANGED,
          url: changeInfo.url,
          tabId,
        });
      }
    });

    chrome.tabs.onActivated.addListener(async ({ tabId }) => {
      const tab = await chrome.tabs.get(tabId);
      if (tab.url) {
        chrome.runtime.sendMessage({
          type: TAB_URL_CHANGED,
          url: tab.url,
          tabId,
        });
      }
    });
  },
});

6.加入 CSS 設定(entrypoints\sidepanel\style.css)

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 1;
}

.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  flex-direction: row;
  align-items: center; /* 垂直置中 */
  justify-content: space-between; /* 左右兩端對齊，中間留空 */
  padding: 8px 16px; /* 視覺上好看一點 */
  border-bottom: 1px solid #eee; /* 可選，做個底線分隔 */
}
.chat-header-title {
  font-size: 18px;
  font-weight: bold;
}

.chat-header-button {
  font-size: 20px;
}
.ant-bubble-list {
  flex: 1 1 auto; /* 撐開剩餘空間 */
  overflow-y: auto; /* 可以滾動聊天內容 */
}

form {
  flex: 0 0 auto; /* 輸入欄固定高度 */
}

7.將對話 UI 加入 entrypoints/sidepanel/App.tsx 之中

import ChatUi from "./ChatUi";

function App() {
  return <ChatUi />;
}

export default App;

最後，執行 npm run dev ，
先到設定頁面設定 LLM ，再回到對話頁面，進行對話。

針對網頁重點整理，

查看 Agent 的 network 記錄，

在 messages 中，
0: 是使用者發出的訊息，
1: 是 LLM 要取 Call Tool 的訊息，
2: 是 Agent 呼叫 Tool 的結果
這些訊息一併發給 LLM，LLM 會根據這些訊息進行回覆。

結論

本篇文章實作了將原本的 SidePanel UI 優化為具備完整對話介面的 AI 助手，並加入設定頁面，讓使用者可以靈活調整 LLM 的參數與 API 資訊。
透過 Ant Design X 提供的 Chat UI 元件，我們快速建立了現代化的對話體驗，同時搭配 LangChain Agent 讓 SidePanel 對話具備語境感知與網頁背景整合的能力。

這樣的架構不僅可用於簡單的聊天用途，也為日後整合更多工具（如資料擷取、表單填寫、自動化操作等）奠定基礎。
例如針對表單系統，可以貼上合約內容來與畫面欄位進行比對，讓 AI 助手幫我們找出應該填寫的資訊，如下圖所示：

未來展望

未來可進一步考慮加入：

• 對話訊息的持久化與同步
• 工具（Tool）模組的整合（如查詢網頁內容、搜尋引擎等）
• 上傳附件進行處理
  …

透過 Chrome 擴充功能結合 LLM，能將 AI 由「問答工具」進化為「主動型助理」，解鎖更多生產力場景。
程式碼可以參考:wxtagent程式碼

參考資源

用 Browser Extension 打造具網頁背景感知的 AI 助理，補足 LLM 的視野盲點
為什麼 AI 工具需要瀏覽器擴充功能來補全 Web 背景？
如何用 WXT 和 LangChain 快速打造具備 SidePanel 的 AI Chrome 擴充功能
wxtagent 程式碼