> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-en/conversations/web-chat/citation-display.md).

# Citation Source Display

This article introduces the citation display optimization features in the WebChat chat window, including multilingual support and visual presentation improvements.

## What Is Citation Display? <a href="#what-is-citation-display" id="what-is-citation-display"></a>

When the AI Assistant answers a question using information from specific documents or data in the Knowledge Base, the system displays "citations" below the response, letting end users know where the information comes from.

This feature is especially suitable for scenarios that require source verification, such as:

* Regulatory inquiry assistant: Displays the source of legal provisions
* Policy consultation assistant: Displays policy document sources
* Product customer service assistant: Displays product manuals or official documents
* Medical information assistant: Displays medical literature sources

## Citation Display Location <a href="#citation-display-location" id="citation-display-location"></a>

Citations appear below the AI Assistant's response content in a clear format:

```
AI Assistant response content...

📚 Citations:
• Product User Manual - Chapter 3
• FAQ - Return and Exchange Policy
```

## Multilingual Support <a href="#multilingual-support" id="multilingual-support"></a>

### Automatic Language Adaptation <a href="#automatic-language-adaptation" id="automatic-language-adaptation"></a>

WebChat citation display now supports automatic multilingual adaptation. When end users switch languages, the citation interface text automatically switches to the corresponding language.

#### Supported Languages <a href="#supported-languages" id="supported-languages"></a>

* **Traditional Chinese**: 引用來源、參考資料
* **Simplified Chinese**: 引用来源、参考资料
* **English**: Citation、References

### Language Switch Timing <a href="#language-switch-timing" id="language-switch-timing"></a>

WebChat automatically switches languages based on the following scenarios:

1. **Browser language settings**: On first load, the display language is based on the user's browser language
2. **Manual switch**: When users switch languages in WebChat, citation text updates accordingly
3. **Website language environment**: If your website supports multiple languages, WebChat automatically matches the website's language settings

{% hint style="info" %}
For WebChat language configuration, refer to: [Web Chat Overview](https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/tree/main/en/channels/README.md)
{% endhint %}

## Visual Presentation Optimization <a href="#visual-presentation-optimization" id="visual-presentation-optimization"></a>

In addition to multilingual support, the visual presentation of citations has been optimized for clearer readability.

### Optimization Items <a href="#optimization-items" id="optimization-items"></a>

1. **Spacing adjustments**: More appropriate spacing between citations and response content for clearer visual hierarchy
2. **Font styling**: Citations use a different font style to distinguish them from the main content
3. **Color treatment**: Citations use lighter colors to avoid interfering with the readability of main content
4. **Icon markers**: Unified icons mark citations for better recognition

## Dark Mode Support <a href="#dark-mode-support" id="dark-mode-support"></a>

Citation display also supports dark mode. When end users' devices use a dark theme, the text and background colors of citations automatically adjust for clear visibility against dark backgrounds.

### Dark Mode Adaptation Items <a href="#dark-mode-adaptation-items" id="dark-mode-adaptation-items"></a>

* Text color automatically adjusts to lighter shades
* Background color adapts to the dark theme
* Maintains contrast with main content

{% hint style="success" %}
Dark mode activates automatically based on the user's device settings; no manual configuration is needed.
{% endhint %}

## Practical Use Cases <a href="#use-cases" id="use-cases"></a>

### 🏛️ Government Policy Consultation Platform <a href="#government-policy-consultation" id="government-policy-consultation"></a>

**Usage scenario**: When citizens inquire about the eligibility requirements for a subsidy policy, the AI Assistant not only provides the answer but also displays the source link to the policy announcement.

**Benefits**:

* Increases information credibility
* Allows citizens to review the full announcement
* Reduces concerns about information accuracy

### ⚖️ Legal Consultation Assistant <a href="#legal-consultation-assistant" id="legal-consultation-assistant"></a>

**Usage scenario**: When users inquire about specific legal provisions, the AI Assistant displays the source and article number of the relevant law.

**Benefits**:

* Provides complete legal basis
* Users can verify the original legal provisions
* Enhances the professionalism of the consultation service

### 🏥 Medical Information Platform <a href="#medical-information-platform" id="medical-information-platform"></a>

**Usage scenario**: When patients inquire about disease-related information, the AI Assistant indicates which medical literature or health education article the information comes from.

**Benefits**:

* Provides information source transparency
* Helps patients understand the credibility of the information
* Complies with medical information provision standards

## Admin Settings <a href="#admin-settings" id="admin-settings"></a>

### Enable Citation Display <a href="#enable-citation-display" id="enable-citation-display"></a>

The citation display feature is enabled by default. To adjust the settings:

1. Go to the "AI Assistant" settings page
2. Select "Response Settings"
3. Find the "Show Citations" option
4. Toggle the switch to enable or disable

### Customize Citation Format <a href="#customize-citation-format" id="customize-citation-format"></a>

You can add metadata to Knowledge Base documents to customize the citation display format:

* **Document title**: The document name displayed in citations
* **Chapter number**: The specific chapter or page number displayed
* **Publication date**: The document's publication or update date
* **External link**: A link to the original document

{% hint style="info" %}
For Knowledge Base metadata configuration, refer to: [Document Management: Tags and Metadata](https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/tree/main/km/tags-and-metadata.md)
{% endhint %}

## FAQ <a href="#faq" id="faq"></a>

### Q1: Will citations show all referenced documents? <a href="#faq-show-all-referenced-documents" id="faq-show-all-referenced-documents"></a>

Not necessarily. The system displays the most relevant citations, typically no more than 3-5, to avoid information overload.

### Q2: Can citations be hidden? <a href="#faq-hide-citation" id="faq-hide-citation"></a>

Yes. Disable the "Show Citations" option in the AI Assistant settings.

### Q3: Can the citation language be fixed to a specific language? <a href="#faq-fix-citation-language" id="faq-fix-citation-language"></a>

Citations automatically match the WebChat language setting. If you want to fix it to a specific language, you need to lock the language option in the WebChat settings.

### Q4: Do citations support clickable links? <a href="#faq-citation-clickable-link" id="faq-citation-clickable-link"></a>

Yes. If you have configured external links in your Knowledge Base documents, citations will display as clickable links.

### Q5: What if citations are hard to read in dark mode? <a href="#faq-citation-dark-mode-visibility" id="faq-citation-dark-mode-visibility"></a>

The system has been optimized for dark mode. If issues persist, it may be a browser cache problem. Try clearing the cache or refreshing the page.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-en/conversations/web-chat/citation-display.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.