feat(MessageContent): Add Collapsible Citations Display (#4285)

* feat(MessageContent): 添加引用内容折叠功能，优化用户界面交互 * feat(Citations): add hideTitle prop to control title visibility in CitationsList * feat(Messages): add message update functionality and manage UI state for citations and web search * fix: web search citation --------- Co-authored-by: 自由的世界人 <3196812536@qq.com>
2025-04-15 22:47:20 +08:00
parent a34e10cb0d
commit eb8ee5ec02
5 changed files with 489 additions and 164 deletions
@@ -1,8 +1,6 @@
-import { InfoCircleOutlined } from '@ant-design/icons'
 import Favicon from '@renderer/components/Icons/FallbackFavicon'
 import { HStack } from '@renderer/components/Layout'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 interface Citation {
@@ -15,19 +13,14 @@ interface Citation {

 interface CitationsListProps {
  citations: Citation[]
+  hideTitle?: boolean
 }

 const CitationsList: React.FC<CitationsListProps> = ({ citations }) => {
-  const { t } = useTranslation()
-
  if (!citations || citations.length === 0) return null

  return (
    <CitationsContainer className="footnotes">
-      <CitationsTitle>
-        {t('message.citations')}
-        <InfoCircleOutlined style={{ fontSize: '14px', marginLeft: '4px', opacity: 0.6 }} />
-      </CitationsTitle>
      {citations.map((citation) => (
        <HStack key={citation.url || citation.number} style={{ alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 13, color: 'var(--color-text-2)' }}>{citation.number}.</span>
@@ -57,12 +50,6 @@ const CitationsContainer = styled.div`
  }
 `

-const CitationsTitle = styled.div`
-  font-weight: 500;
-  margin-bottom: 4px;
-  color: var(--color-text-1);
-`
-
 const CitationLink = styled.a`
  font-size: 14px;
  line-height: 1.6;
@@ -47,7 +47,7 @@ const MessageItem: FC<Props> = ({
  const { isBubbleStyle } = useMessageStyle()
  const { showMessageDivider, messageFont, fontSize } = useSettings()
  const messageContainerRef = useRef<HTMLDivElement>(null)
-  // const topic = useTopic(assistant, _topic?.id)
+
  const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null)
  const [selectedQuoteText, setSelectedQuoteText] = useState<string>('')
  const [selectedText, setSelectedText] = useState<string>('')
@@ -1,4 +1,4 @@
-import { SyncOutlined, TranslationOutlined } from '@ant-design/icons'
+import { DownOutlined, InfoCircleOutlined, SyncOutlined, TranslationOutlined, UpOutlined } from '@ant-design/icons'
 import { isOpenAIWebSearch } from '@renderer/config/models'
 import { getModelUniqId } from '@renderer/services/ModelService'
 import { Message, Model } from '@renderer/types'
@@ -7,7 +7,7 @@ import { withMessageThought } from '@renderer/utils/formats'
 import { Divider, Flex } from 'antd'
 import { clone } from 'lodash'
 import { Search } from 'lucide-react'
-import React, { Fragment, useMemo } from 'react'
+import React, { Fragment, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import BarLoader from 'react-spinners/BarLoader'
 import BeatLoader from 'react-spinners/BeatLoader'
@@ -30,6 +30,7 @@ const MessageContent: React.FC<Props> = ({ message: _message, model }) => {
  const { t } = useTranslation()
  const message = withMessageThought(clone(_message))
  const isWebCitation = model && (isOpenAIWebSearch(model) || model.provider === 'openrouter')
+  const [citationsCollapsed, setCitationsCollapsed] = useState(true)

  // HTML实体编码辅助函数
  const encodeHTML = (str: string) => {
@@ -82,6 +83,16 @@ const MessageContent: React.FC<Props> = ({ message: _message, model }) => {
      }))
  }, [message.metadata?.citations, message.metadata?.annotations, model])

+  // 判断是否有引用内容
+  const hasCitations = useMemo(() => {
+    return !!(
+      (formattedCitations && formattedCitations.length > 0) ||
+      (message?.metadata?.webSearch && message.status === 'success') ||
+      (message?.metadata?.webSearchInfo && message.status === 'success') ||
+      (message?.metadata?.groundingMetadata && message.status === 'success')
+    )
+  }, [formattedCitations, message])
+
  // 获取引用数据
  const citationsData = useMemo(() => {
    const searchResults =
@@ -220,64 +231,104 @@ const MessageContent: React.FC<Props> = ({ message: _message, model }) => {
          )}
        </Fragment>
      )}
-      {message?.metadata?.groundingMetadata && message.status == 'success' && (
-        <>
-          <CitationsList
-            citations={
-              message.metadata.groundingMetadata?.groundingChunks?.map((chunk, index) => ({
-                number: index + 1,
-                url: chunk?.web?.uri || '',
-                title: chunk?.web?.title,
-                showFavicon: false
-              })) || []
-            }
-          />
-          <SearchEntryPoint
-            dangerouslySetInnerHTML={{
-              __html: message.metadata.groundingMetadata?.searchEntryPoint?.renderedContent
-                ? message.metadata.groundingMetadata.searchEntryPoint.renderedContent
-                    .replace(/@media \(prefers-color-scheme: light\)/g, 'body[theme-mode="light"]')
-                    .replace(/@media \(prefers-color-scheme: dark\)/g, 'body[theme-mode="dark"]')
-                : ''
-            }}
-          />
-        </>
-      )}
-      {formattedCitations && (
-        <CitationsList
-          citations={formattedCitations.map((citation) => ({
-            number: citation.number,
-            url: citation.url,
-            hostname: citation.hostname,
-            showFavicon: isWebCitation
-          }))}
-        />
-      )}
-      {message?.metadata?.webSearch && message.status === 'success' && (
-        <CitationsList
-          citations={message.metadata.webSearch.results.map((result, index) => ({
-            number: index + 1,
-            url: result.url,
-            title: result.title,
-            showFavicon: true
-          }))}
-        />
-      )}
-      {message?.metadata?.webSearchInfo && message.status === 'success' && (
-        <CitationsList
-          citations={message.metadata.webSearchInfo.map((result, index) => ({
-            number: index + 1,
-            url: result.link || result.url,
-            title: result.title,
-            showFavicon: true
-          }))}
-        />
+      {hasCitations && (
+        <CitationsContainer>
+          <CitationsHeader onClick={() => setCitationsCollapsed(!citationsCollapsed)}>
+            <div>
+              {t('message.citations')}
+              <InfoCircleOutlined style={{ fontSize: '14px', marginLeft: '4px', opacity: 0.6 }} />
+            </div>
+            {citationsCollapsed ? <DownOutlined /> : <UpOutlined />}
+          </CitationsHeader>
+
+          {!citationsCollapsed && (
+            <CitationsContent>
+              {message?.metadata?.groundingMetadata && message.status === 'success' && (
+                <>
+                  <CitationsList
+                    citations={
+                      message.metadata.groundingMetadata?.groundingChunks?.map((chunk, index) => ({
+                        number: index + 1,
+                        url: chunk?.web?.uri || '',
+                        title: chunk?.web?.title,
+                        showFavicon: false
+                      })) || []
+                    }
+                  />
+                  <SearchEntryPoint
+                    dangerouslySetInnerHTML={{
+                      __html: message.metadata.groundingMetadata?.searchEntryPoint?.renderedContent
+                        ? message.metadata.groundingMetadata.searchEntryPoint.renderedContent
+                            .replace(/@media \(prefers-color-scheme: light\)/g, 'body[theme-mode="light"]')
+                            .replace(/@media \(prefers-color-scheme: dark\)/g, 'body[theme-mode="dark"]')
+                        : ''
+                    }}
+                  />
+                </>
+              )}
+              {formattedCitations && (
+                <CitationsList
+                  citations={formattedCitations.map((citation) => ({
+                    number: citation.number,
+                    url: citation.url,
+                    hostname: citation.hostname,
+                    showFavicon: isWebCitation
+                  }))}
+                />
+              )}
+              {message?.metadata?.webSearch && message.status === 'success' && (
+                <CitationsList
+                  citations={message.metadata.webSearch.results.map((result, index) => ({
+                    number: index + 1,
+                    url: result.url,
+                    title: result.title,
+                    showFavicon: true
+                  }))}
+                />
+              )}
+              {message?.metadata?.webSearchInfo && message.status === 'success' && (
+                <CitationsList
+                  citations={message.metadata.webSearchInfo.map((result, index) => ({
+                    number: index + 1,
+                    url: result.link || result.url,
+                    title: result.title,
+                    showFavicon: true
+                  }))}
+                />
+              )}
+            </CitationsContent>
+          )}
+        </CitationsContainer>
      )}
      <MessageAttachments message={message} />
    </Fragment>
  )
 }

+const CitationsContainer = styled.div`
+  margin-top: 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+`
+
+const CitationsHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background-color: var(--color-background-mute);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-border);
+  }
+`
+
+const CitationsContent = styled.div`
+  padding: 10px;
+  background-color: var(--color-background-mute);
+`
 const MessageContentLoading = styled.div`
  display: flex;
  flex-direction: row;