feat: Add Tavily dark mode logo and improve web search settings UI

src/renderer/src/i18n/locales/zh-cn.json

@@ -808,7 +808,7 @@
       "tray.title": "启用系统托盘图标",
       "websearch": {
         "title": "网络搜索",
-        "get_api_key": "点击这里获取 API 密钥",
+        "get_api_key": "点击这里获取密钥",
         "tavily": {
           "title": "Tavily",
           "description": "Tavily 是一个集成了多个搜索引擎的网络搜索工具，支持多种语言和多种搜索引擎。",

src/renderer/src/i18n/locales/zh-tw.json

@@ -799,7 +799,7 @@
       "tray.title": "啟用系統托盤圖標",
       "websearch": {
         "title": "網路搜索",
-        "get_api_key": "點擊這裡獲取 API 密鑰",
+        "get_api_key": "點擊這裡獲取密鑰",
         "tavily": {
           "title": "Tavily",
           "description": "Tavily 是一個集成了多個搜索引擎的網路搜索工具，支持多種語言和多種搜索引擎。",

src/renderer/src/pages/home/Inputbar/Inputbar.tsx

@@ -9,7 +9,7 @@ import {
 } from '@ant-design/icons'
 import { PicCenterOutlined } from '@ant-design/icons'
 import TranslateButton from '@renderer/components/TranslateButton'
-import { isVisionModel } from '@renderer/config/models'
+import { isVisionModel, isWebSearchModel } from '@renderer/config/models'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { modelGenerating, useRuntime } from '@renderer/hooks/useRuntime'
@@ -501,22 +501,30 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic }) => {
   }
 
   const onEnableWebSearch = () => {
-    if (!WebSearchService.isWebSearchEnabled()) {
-      window.modal.confirm({
-        title: t('chat.input.web_search.enable'),
-        content: t('chat.input.web_search.enable_content'),
-        centered: true,
-        okText: t('chat.input.web_search.button.ok'),
-        onOk: () => {
-          navigate('/settings/web-search')
-        }
-      })
-      return
+    if (!isWebSearchModel(model)) {
+      if (!WebSearchService.isWebSearchEnabled()) {
+        window.modal.confirm({
+          title: t('chat.input.web_search.enable'),
+          content: t('chat.input.web_search.enable_content'),
+          centered: true,
+          okText: t('chat.input.web_search.button.ok'),
+          onOk: () => {
+            navigate('/settings/web-search')
+          }
+        })
+        return
+      }
     }
 
     updateAssistant({ ...assistant, enableWebSearch: !assistant.enableWebSearch })
   }
 
+  useEffect(() => {
+    if (!isWebSearchModel(model) && !WebSearchService.isWebSearchEnabled() && assistant.enableWebSearch) {
+      updateAssistant({ ...assistant, enableWebSearch: false })
+    }
+  }, [assistant, model, updateAssistant])
+
   return (
     <Container onDragOver={handleDragOver} onDrop={handleDrop} className="inputbar">
       <NarrowLayout style={{ width: '100%' }}>

src/renderer/src/pages/home/Messages/MessageContent.tsx

@@ -218,6 +218,7 @@ const Favicon = styled.img`
   width: 16px;
   height: 16px;
   border-radius: 4px;
+  background-color: var(--color-background-mute);
 `
 
 export default React.memo(MessageContent)

src/renderer/src/pages/settings/ProviderSettings/index.tsx

@@ -166,6 +166,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
+  padding: 2px 0;
 `
 
 const ProviderListContainer = styled.div`

src/renderer/src/pages/settings/WebSearchSettings.tsx

@@ -1,4 +1,5 @@
 import tavilyLogo from '@renderer/assets/images/search/tavily.svg'
+import tavilyLogoDark from '@renderer/assets/images/search/tavily-dark.svg'
 import { HStack } from '@renderer/components/Layout'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useWebSearchProvider } from '@renderer/hooks/useWebSearchProviders'
@@ -7,7 +8,7 @@ import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import { SettingContainer, SettingGroup, SettingHelpLink, SettingHelpTextRow } from '.'
+import { SettingContainer, SettingDivider, SettingGroup, SettingHelpLink, SettingHelpTextRow } from '.'
 
 const WebSearchSettings: FC = () => {
   const { t } = useTranslation()
@@ -16,6 +17,8 @@ const WebSearchSettings: FC = () => {
   const { provider, updateProvider } = useWebSearchProvider('tavily')
   const [apiKey, setApiKey] = useState(provider.apiKey)
 
+  const logo = theme === 'dark' ? tavilyLogoDark : tavilyLogo
+
   useEffect(() => {
     return () => {
       console.log('apiKey', apiKey, provider.apiKey)
@@ -29,8 +32,9 @@ const WebSearchSettings: FC = () => {
     <SettingContainer theme={theme}>
       <SettingGroup theme={theme}>
         <HStack alignItems="center" gap={10}>
-          <TavilyLogo src={tavilyLogo} alt="web-search" style={{ width: '60px' }} />
+          <TavilyLogo src={logo} alt="web-search" style={{ width: '60px' }} />
         </HStack>
+        <SettingDivider />
         <Paragraph type="secondary" style={{ margin: '10px 0' }}>
           {t('settings.websearch.tavily.description')}
         </Paragraph>
@@ -41,12 +45,10 @@ const WebSearchSettings: FC = () => {
           onChange={(e) => setApiKey(e.target.value)}
           onBlur={() => updateProvider({ ...provider, apiKey })}
         />
-        <SettingHelpTextRow style={{ justifyContent: 'space-between' }}>
-          <HStack gap={5}>
-            <SettingHelpLink target="_blank" href="https://app.tavily.com/home">
-              {t('settings.websearch.get_api_key')}
-            </SettingHelpLink>
-          </HStack>
+        <SettingHelpTextRow style={{ justifyContent: 'space-between', marginTop: 5 }}>
+          <SettingHelpLink target="_blank" href="https://app.tavily.com/home">
+            {t('settings.websearch.get_api_key')}
+          </SettingHelpLink>
         </SettingHelpTextRow>
       </SettingGroup>
     </SettingContainer>