From 861ebfc6e1cc20253b6407fc740caa366094e67e Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Fri, 27 Feb 2026 19:17:41 +0800
Subject: [PATCH] Feat: Make the embedded page of chat compatible with mobile
 devices. (#13262)

### What problem does this PR solve?
Feat: Make the embedded page of chat compatible with mobile devices.

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/components/embed-container.tsx   | 22 +++++++++++++++-------
 web/src/pages/agent/share/index.tsx      |  6 +++---
 web/src/pages/next-chats/share/index.tsx |  8 ++++----
 web/src/pages/next-search/index.tsx      |  3 ++-
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/src/components/embed-container.tsx b/web/src/components/embed-container.tsx
index e96dab6731..6355ad8a43 100644
--- a/web/src/components/embed-container.tsx
+++ b/web/src/components/embed-container.tsx
@@ -20,15 +20,23 @@ export function EmbedContainer({
 
   return (
     <section className="h-[100vh] flex justify-center items-center">
-      <div className="w-40 flex gap-2 absolute left-3 top-12 items-center">
+      <div className="hidden xl:flex w-40 gap-2 absolute left-3 top-12 items-center">
         <img src="/logo.svg" alt="" />
         <span className="text-2xl font-bold">{appConf.appName}</span>
       </div>
-      <div className=" w-[80vw] border rounded-lg">
-        <div className="flex justify-between items-center border-b p-3">
-          <div className="flex gap-2 items-center">
-            <RAGFlowAvatar avatar={avatar} name={title} isPerson />
-            <div className="text-xl text-foreground">{title}</div>
+      <div className="w-full h-full md:w-[80vw] md:h-auto border-0 md:border rounded-none md:rounded-lg">
+        <div className="flex justify-between items-center border-b p-3 relative">
+          <div className="flex gap-2 items-center absolute left-1/2 -translate-x-1/2 md:static md:left-auto md:translate-x-0">
+            <RAGFlowAvatar
+              avatar={avatar}
+              name={title}
+              isPerson
+              className="size-5 md:size-10"
+            />
+            <div className="md:text-xl text-foreground">{title}</div>
+          </div>
+          <div className="flex md:hidden items-center">
+            <img src="/logo.svg" alt="" className="h-6" />
           </div>
           <Button
             variant={'secondary'}
@@ -37,7 +45,7 @@ export function EmbedContainer({
           >
             <div className="flex gap-1 items-center">
               <RefreshCcw size={14} />
-              <span className="text-lg ">Reset</span>
+              <span className="hidden text-lg md:inline-block">Reset</span>
             </div>
           </Button>
         </div>
diff --git a/web/src/pages/agent/share/index.tsx b/web/src/pages/agent/share/index.tsx
index 6d9fd2195c..7222dcd858 100644
--- a/web/src/pages/agent/share/index.tsx
+++ b/web/src/pages/agent/share/index.tsx
@@ -126,7 +126,7 @@ const ChatContainer = () => {
         <div className="flex flex-1 flex-col p-2.5  h-[90vh] m-3">
           <div
             className={cn(
-              'flex flex-1 flex-col overflow-auto scrollbar-auto m-auto w-5/6',
+              'flex flex-1 flex-col overflow-auto scrollbar-auto m-auto md:w-5/6',
             )}
             ref={messageContainerRef}
           >
@@ -186,8 +186,8 @@ const ChatContainer = () => {
             <div ref={scrollRef} />
           </div>
           {isTaskMode || (
-            <div className="flex w-full justify-center mb-8">
-              <div className="w-5/6">
+            <div className="flex w-full justify-center md:mb-8">
+              <div className="w-full md:w-5/6">
                 <NextMessageInput
                   isShared
                   value={value}
diff --git a/web/src/pages/next-chats/share/index.tsx b/web/src/pages/next-chats/share/index.tsx
index fbeacefd94..cb26eed9d0 100644
--- a/web/src/pages/next-chats/share/index.tsx
+++ b/web/src/pages/next-chats/share/index.tsx
@@ -71,10 +71,10 @@ const ChatContainer = () => {
         avatar={chatInfo.avatar}
         handleReset={removeAllMessagesExceptFirst}
       >
-        <div className="flex flex-1 flex-col p-2.5  h-[90vh] m-3">
+        <div className="flex flex-1 flex-col p-2.5 h-[90vh] m-3">
           <div
             className={
-              'flex flex-1 flex-col overflow-auto scrollbar-auto m-auto w-5/6'
+              'flex flex-1 flex-col overflow-auto scrollbar-auto m-auto w-full md:w-5/6'
             }
             ref={messageContainerRef}
           >
@@ -109,8 +109,8 @@ const ChatContainer = () => {
             </div>
             <div ref={scrollRef} />
           </div>
-          <div className="flex w-full justify-center mb-8">
-            <div className="w-5/6">
+          <div className="flex w-full justify-center md:mb-8">
+            <div className="w-full md:w-5/6">
               <NextMessageInput
                 isShared
                 value={value}
diff --git a/web/src/pages/next-search/index.tsx b/web/src/pages/next-search/index.tsx
index c9b5c909bc..3fb9c71642 100644
--- a/web/src/pages/next-search/index.tsx
+++ b/web/src/pages/next-search/index.tsx
@@ -15,6 +15,7 @@ import {
   useFetchTenantInfo,
   useFetchUserInfo,
 } from '@/hooks/use-user-setting-request';
+import { Routes } from '@/routes';
 import { Send, Settings } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -109,7 +110,7 @@ export default function SearchPage() {
           <EmbedAppModal
             open={openEmbed}
             setOpen={setOpenEmbed}
-            url="/next-search/share"
+            url={Routes.SearchShare}
             token={SearchData?.id as string}
             from={SharedFrom.Search}
             tenantId={tenantId}