From 28f1e486e6b6315e0e059aaec171e55f43f5a6cf Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Thu, 8 May 2025 18:31:14 +0800
Subject: [PATCH] style: update ChatNavigation and CitationsList components for
 improved UI consistency

- Added header style to remove borders in ChatNavigation.
- Enhanced CitationsList with new Skeleton loading state and improved layout for citation cards.
- Refactored CitationLink to a div for better styling control and adjusted padding in OpenButton for a more polished appearance.
---
 .../pages/home/Messages/ChatNavigation.tsx    |  1 +
 .../src/pages/home/Messages/CitationsList.tsx | 74 ++++++++++---------
 2 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
index a075e85d0c..b0f1c834e5 100644
--- a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
+++ b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
@@ -375,6 +375,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
         width={680}
         destroyOnClose
         styles={{
+          header: { border: 'none' },
           body: {
             padding: 0,
             height: 'calc(100% - 55px)'
diff --git a/src/renderer/src/pages/home/Messages/CitationsList.tsx b/src/renderer/src/pages/home/Messages/CitationsList.tsx
index 9a9134766f..47c0afcc24 100644
--- a/src/renderer/src/pages/home/Messages/CitationsList.tsx
+++ b/src/renderer/src/pages/home/Messages/CitationsList.tsx
@@ -2,7 +2,7 @@ import Favicon from '@renderer/components/Icons/FallbackFavicon'
 import { HStack } from '@renderer/components/Layout'
 import { fetchWebContent } from '@renderer/utils/fetch'
 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
-import { Button, Drawer } from 'antd'
+import { Button, Drawer, Skeleton } from 'antd'
 import { FileSearch } from 'lucide-react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -90,6 +90,7 @@ const CitationsList: React.FC<CitationsListProps> = ({ citations }) => {
           onClose={() => setOpen(false)}
           open={open}
           width={680}
+          styles={{ header: { border: 'none' }, body: { paddingTop: 0, backgroundColor: 'var(--color-background)' } }}
           destroyOnClose={false}>
           {open &&
             citations.map((citation) => (
@@ -107,15 +108,12 @@ const CitationsList: React.FC<CitationsListProps> = ({ citations }) => {
   )
 }
 
-const handleLinkClick = (url: string, event: React.MouseEvent) => {
-  event.preventDefault()
+const handleLinkClick = (url: string) => {
   if (url.startsWith('http')) window.open(url, '_blank', 'noopener,noreferrer')
   else window.api.file.openPath(url)
 }
 
 const WebSearchCitation: React.FC<{ citation: Citation }> = ({ citation }) => {
-  const { t } = useTranslation()
-
   const { data: fetchedContent, isLoading } = useQuery({
     queryKey: ['webContent', citation.url],
     queryFn: async () => {
@@ -128,45 +126,48 @@ const WebSearchCitation: React.FC<{ citation: Citation }> = ({ citation }) => {
   })
 
   return (
-    <WebSearchCard>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+    <WebSearchCard onClick={() => handleLinkClick(citation.url)}>
+      <WebSearchCardHeader>
         {citation.showFavicon && citation.url && (
           <Favicon hostname={new URL(citation.url).hostname} alt={citation.title || citation.hostname || ''} />
         )}
-        <CitationLink href={citation.url} onClick={(e) => handleLinkClick(citation.url, e)}>
+        <CitationLink className="text-nowrap">
           {citation.title || <span className="hostname">{citation.hostname}</span>}
         </CitationLink>
-      </div>
-      {isLoading ? <div>{t('common.loading')}</div> : fetchedContent}
+      </WebSearchCardHeader>
+      {isLoading ? (
+        <Skeleton active paragraph={{ rows: 1 }} title={false} />
+      ) : (
+        <WebSearchCardContent>{fetchedContent}</WebSearchCardContent>
+      )}
     </WebSearchCard>
   )
 }
 
 const KnowledgeCitation: React.FC<{ citation: Citation }> = ({ citation }) => (
-  <WebSearchCard>
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+  <WebSearchCard onClick={() => handleLinkClick(citation.url)}>
+    <WebSearchCardHeader>
       {citation.showFavicon && <FileSearch width={16} />}
-      <CitationLink href={citation.url} onClick={(e) => handleLinkClick(citation.url, e)}>
-        {citation.title}
-      </CitationLink>
-    </div>
-    {citation.content && truncateText(citation.content, 100)}
+      <CitationLink className="text-nowrap">{citation.title}</CitationLink>
+    </WebSearchCardHeader>
+    <WebSearchCardContent>{citation.content && truncateText(citation.content, 100)}</WebSearchCardContent>
   </WebSearchCard>
 )
 
 const OpenButton = styled(Button)`
   display: flex;
   align-items: center;
-  padding: 2px 6px;
+  padding: 3px 8px;
   margin-bottom: 8px;
   align-self: flex-start;
   font-size: 12px;
+  background-color: var(--color-background-soft);
+  border-radius: var(--list-item-border-radius);
 `
 
 const PreviewIcons = styled.div`
   display: flex;
   align-items: center;
-  margin-right: 8px;
 `
 
 const PreviewIcon = styled.div`
@@ -187,19 +188,11 @@ const PreviewIcon = styled.div`
   }
 `
 
-const CitationLink = styled.a`
+const CitationLink = styled.div`
   font-size: 14px;
   line-height: 1.6;
   color: var(--color-text-1);
   text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  .hostname {
-    color: var(--color-link);
-  }
 `
 
 const WebSearchCard = styled.div`
@@ -207,18 +200,29 @@ const WebSearchCard = styled.div`
   flex-direction: column;
   width: 100%;
   padding: 12px;
-  margin-bottom: 8px;
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
+  border-radius: var(--list-item-border-radius);
   background-color: var(--color-background);
   transition: all 0.3s ease;
+  cursor: pointer;
 
   &:hover {
-    box-shadow: 0 4px 12px var(--color-border-soft);
-    background-color: var(--color-hover);
-    border-color: var(--color-primary-soft);
-    transform: translateY(-2px);
+    background-color: var(--color-background-soft);
   }
 `
 
+const WebSearchCardHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-weight: 500;
+`
+
+const WebSearchCardContent = styled.div`
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--color-text-2);
+`
+
 export default CitationsList