From 24033bf199f013551be8a92414deca6c06ce62cb Mon Sep 17 00:00:00 2001
From: euvre <93761161+euvre@users.noreply.github.com>
Date: Fri, 14 Aug 2026 01:58:50 -0700
Subject: [PATCH] fix(web): add tooltip to web search toggle in chat input box
 (#18276)

---
 web/src/components/message-input/next.tsx | 33 ++++++++++++++++-------
 web/src/locales/en.ts                     |  1 +
 web/src/locales/zh.ts                     |  1 +
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/web/src/components/message-input/next.tsx b/web/src/components/message-input/next.tsx
index d88c588ea1..64e33886e4 100644
--- a/web/src/components/message-input/next.tsx
+++ b/web/src/components/message-input/next.tsx
@@ -30,6 +30,11 @@ import {
 } from '@/components/file-upload';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { CircleStop, Globe, Paperclip, Send, Upload, X } from 'lucide-react';
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -357,16 +362,24 @@ export function NextMessageInput({
             )}
 
             {showInternet && (
-              <Button
-                type="button"
-                variant={enableInternet ? 'accent' : 'transparent'}
-                size="icon-xs"
-                className="border-0"
-                onClick={handleInternetToggle}
-                data-testid="chat-detail-internet-toggle"
-              >
-                <Globe />
-              </Button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    type="button"
+                    variant={enableInternet ? 'accent' : 'transparent'}
+                    size="icon-xs"
+                    className="border-0"
+                    onClick={handleInternetToggle}
+                    data-testid="chat-detail-internet-toggle"
+                  >
+                    <Globe />
+                    <span className="sr-only">{t('chat.webSearch')}</span>
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{t('chat.webSearch')}</p>
+                </TooltipContent>
+              </Tooltip>
             )}
           </div>
 
diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts
index cf340e2a3d..a0fc336737 100644
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@@ -1249,6 +1249,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       tavilyApiKeyTip:
         'If an API Key is correctly set here, Tavily-based web searches will be used to supplement dataset retrieval.',
       tavilyApiKeyMessage: 'Please enter your Tavily API Key',
+      webSearch: 'Web search',
       webSearchProvider: 'Web search provider',
       webSearchProviderTip:
         'Select the service used when Internet search is enabled.',
diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts
index 56425662ab..fa282df66e 100644
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@@ -1137,6 +1137,7 @@ NER：使用 spaCy NER 和基于规则的关键词提取来抽取 Entities 和 R
       tavilyApiKeyTip:
         '如果 API 密钥设置正确，它将利用 Tavily 进行网络搜索作为知识库的补充。',
       tavilyApiKeyMessage: '请输入你的 Tavily API Key',
+      webSearch: '网络搜索',
       webSearchProvider: '网络搜索服务',
       webSearchProviderTip: '选择启用联网搜索时使用的搜索服务。',
       webSearchProviderPlaceholder: '请选择网络搜索服务',