# 引用來源顯示

本篇將介紹 WebChat 聊天視窗中引用來源顯示的優化功能，包含多語言支援和視覺呈現改善。

## 什麼是引用來源顯示？ <a href="#what-is-citation-display" id="what-is-citation-display"></a>

當 AI 助理回答問題時，如果答案來自知識庫中的特定文件或資料，系統會在回答下方顯示「引用來源」，讓終端使用者知道資訊的出處。

這個功能特別適合需要提供資訊來源證明的情境，例如：

* 法規查詢助理：顯示法條出處
* 政策諮詢助理：顯示政策文件來源
* 產品客服助理：顯示產品說明書或官方文件
* 醫療資訊助理：顯示醫學文獻來源

## 引用來源的顯示位置 <a href="#citation-display-location" id="citation-display-location"></a>

引用來源會顯示在 AI 助理回答內容的下方，以清楚的格式標示：

```
AI 助理回答內容...

📚 引用來源：
• 產品使用手冊 - 第 3 章
• 常見問題集 - 退換貨政策
```

## 多語言支援 <a href="#multilingual-support" id="multilingual-support"></a>

### 自動語言適配 <a href="#automatic-language-adaptation" id="automatic-language-adaptation"></a>

WebChat 的引用來源顯示現已支援多語言自動適配。當終端使用者切換語言時，引用來源的介面文字會自動切換為對應語言。

#### 支援的語言 <a href="#supported-languages" id="supported-languages"></a>

* **繁體中文**：引用來源、參考資料
* **簡體中文**：引用来源、参考资料
* **英文**：Citation、References

### 語言切換時機 <a href="#language-switch-timing" id="language-switch-timing"></a>

WebChat 會依據以下情境自動切換語言：

1. **瀏覽器語言設定**：首次載入時，依據使用者的瀏覽器語言自動顯示
2. **手動切換**：使用者在 WebChat 中切換語言時，引用來源文字同步更新
3. **網站語言環境**：如果您的網站支援多語言，WebChat 會自動配合網站的語言設定

{% hint style="info" %}
WebChat 的語言設定方式請參考：[Web Chat 介紹總覽](https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/zh-tw/channels/README.md)
{% endhint %}

## 視覺呈現優化 <a href="#visual-presentation-optimization" id="visual-presentation-optimization"></a>

除了多語言支援外，引用來源的視覺呈現也經過優化，讓資訊更清楚易讀。

### 優化項目 <a href="#optimization-items" id="optimization-items"></a>

1. **間距調整**：引用來源與回答內容之間的間距更適當，視覺層次更清晰
2. **字體樣式**：引用來源使用不同的字體樣式，與主要內容做出區隔
3. **顏色處理**：引用來源使用較淺的顏色，不會干擾主要內容的閱讀
4. **圖示標記**：使用統一的圖示標記引用來源，增加識別度

## 深色模式支援 <a href="#dark-mode-support" id="dark-mode-support"></a>

引用來源顯示也支援深色模式。當終端使用者的裝置使用深色主題時，引用來源的文字和背景顏色會自動調整，確保在深色背景下清楚顯示。

### 深色模式適配項目 <a href="#dark-mode-adaptation-items" id="dark-mode-adaptation-items"></a>

* 文字顏色自動調整為淺色
* 背景顏色適配深色主題
* 保持與主要內容的對比度

{% hint style="success" %}
深色模式會依據使用者的裝置設定自動啟用，無需手動設定。
{% endhint %}

## 實際應用場景 <a href="#use-cases" id="use-cases"></a>

### 🏛️ 政府政策諮詢平台 <a href="#government-policy-consultation" id="government-policy-consultation"></a>

**使用情境**： 民眾詢問某項補助政策的申請條件時，AI 助理不僅提供答案，還會顯示政策公告的來源連結。

**效益**：

* 提高資訊可信度
* 讓民眾可以進一步查閱完整公告
* 減少民眾對資訊正確性的疑慮

### ⚖️ 法律諮詢助理 <a href="#legal-consultation-assistant" id="legal-consultation-assistant"></a>

**使用情境**： 使用者詢問某項法規的規定時，AI 助理會顯示法條的出處和條文編號。

**效益**：

* 提供完整的法律依據
* 使用者可以查證原始法條
* 增加諮詢服務的專業度

### 🏥 醫療資訊平台 <a href="#medical-information-platform" id="medical-information-platform"></a>

**使用情境**： 患者詢問疾病相關資訊時，AI 助理會標示資訊來自哪篇醫學文獻或衛教文章。

**效益**：

* 提供資訊來源透明度
* 讓患者了解資訊的可信度
* 符合醫療資訊提供的規範要求

## 管理員設定 <a href="#admin-settings" id="admin-settings"></a>

### 啟用引用來源顯示 <a href="#enable-citation-display" id="enable-citation-display"></a>

引用來源顯示功能預設為啟用狀態。如果您希望調整設定：

1. 進入「AI 助理」設定頁面
2. 選擇「回答設定」
3. 找到「顯示引用來源」選項
4. 切換開關即可啟用或停用

### 自訂引用來源格式 <a href="#customize-citation-format" id="customize-citation-format"></a>

您可以在知識庫文件中加入元資料，自訂引用來源的顯示格式：

* **文件標題**：顯示在引用來源中的文件名稱
* **章節編號**：顯示具體的章節或頁碼
* **發布日期**：顯示文件的發布或更新日期
* **外部連結**：提供原始文件的連結

{% hint style="info" %}
知識庫元資料的設定方式請參考：[文件管理：標籤及元資料](https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/km/tags-and-metadata.md)
{% endhint %}

## 常見問題 <a href="#faq" id="faq"></a>

### Q1：引用來源會顯示所有參考的文件嗎？ <a href="#faq-show-all-referenced-documents" id="faq-show-all-referenced-documents"></a>

不一定。系統會顯示「最相關」的引用來源，通常不超過 3-5 個，避免資訊過載。

### Q2：可以隱藏引用來源嗎？ <a href="#faq-hide-citation" id="faq-hide-citation"></a>

可以。在 AI 助理設定中關閉「顯示引用來源」選項即可。

### Q3：引用來源的語言可以固定為某一種語言嗎？ <a href="#faq-fix-citation-language" id="faq-fix-citation-language"></a>

引用來源會自動配合 WebChat 的語言設定。如果您希望固定為某種語言，需要在 WebChat 設定中固定語言選項。

### Q4：引用來源支援點擊連結嗎？ <a href="#faq-citation-clickable-link" id="faq-citation-clickable-link"></a>

支援。如果您在知識庫文件中設定了外部連結，引用來源會顯示為可點擊的連結。

### Q5：深色模式下引用來源看不清楚怎麼辦？ <a href="#faq-citation-dark-mode-visibility" id="faq-citation-dark-mode-visibility"></a>

系統已針對深色模式進行優化。如果仍有問題，可能是瀏覽器快取問題，請嘗試清除快取或重新整理頁面。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.maiagent.ai/conversations/web-chat/citation-display.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
