From bbd9fe9777e41f445092e0d2fcbb65c78e67519e Mon Sep 17 00:00:00 2001
From: KVOJJJin <jzongcode@gmail.com>
Date: Wed, 16 Apr 2025 17:25:25 +0800
Subject: [PATCH] Fix:style of opening questions (#18194)

---
 .../base/chat/chat/answer/suggested-questions.tsx    | 12 +++---------
 .../base/chat/embedded-chatbot/chat-wrapper.tsx      |  4 ++--
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/web/app/components/base/chat/chat/answer/suggested-questions.tsx b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
index 7b8da0e9f0..8b64bff6a3 100644
--- a/web/app/components/base/chat/chat/answer/suggested-questions.tsx
+++ b/web/app/components/base/chat/chat/answer/suggested-questions.tsx
@@ -2,8 +2,6 @@ import type { FC } from 'react'
 import { memo } from 'react'
 import type { ChatItem } from '../../types'
 import { useChatContext } from '../context'
-import Button from '@/app/components/base/button'
-import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type SuggestedQuestionsProps = {
   item: ChatItem
@@ -12,9 +10,6 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
   item,
 }) => {
   const { onSend } = useChatContext()
-  const media = useBreakpoints()
-  const isMobile = media === MediaType.mobile
-  const klassName = `mr-1 mt-1 ${isMobile ? 'block overflow-hidden text-ellipsis' : ''} max-w-full shrink-0 last:mr-0`
 
   const {
     isOpeningStatement,
@@ -27,14 +22,13 @@ const SuggestedQuestions: FC<SuggestedQuestionsProps> = ({
   return (
     <div className='flex flex-wrap'>
       {suggestedQuestions.filter(q => !!q && q.trim()).map((question, index) => (
-        <Button
+        <div
           key={index}
-          variant='secondary-accent'
-          className={klassName}
+          className='system-sm-medium mr-1 mt-1 inline-flex max-w-full shrink-0 cursor-pointer flex-wrap rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3.5 py-2 text-components-button-secondary-accent-text shadow-xs last:mr-0 hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover'
           onClick={() => onSend?.(question)}
         >
           {question}
-        </Button>),
+        </div>),
       )}
     </div>
   )
diff --git a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
index cb9dd37b43..a06930c48f 100644
--- a/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/chat-wrapper.tsx
@@ -184,7 +184,7 @@ const ChatWrapper = () => {
       return null
     if (welcomeMessage.suggestedQuestions && welcomeMessage.suggestedQuestions?.length > 0) {
       return (
-        <div className='flex h-[50vh] items-center justify-center px-4 py-12'>
+        <div className={cn('flex items-center justify-center px-4 py-12', isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]')}>
           <div className='flex max-w-[720px] grow gap-4'>
             <AppIcon
               size='xl'
@@ -202,7 +202,7 @@ const ChatWrapper = () => {
       )
     }
     return (
-      <div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12')}>
+      <div className={cn('flex h-[50vh] flex-col items-center justify-center gap-3 py-12', isMobile ? 'min-h-[30vh] py-0' : 'h-[50vh]')}>
         <AppIcon
           size='xl'
           iconType={appData?.site.icon_type}