Fix/new conversation in mobile phone (#593)

web/app/components/share/header.tsx

@@ -1,6 +1,11 @@
 import type { FC } from 'react'
 import React from 'react'
+import {
+  Bars3Icon,
+  PencilSquareIcon,
+} from '@heroicons/react/24/solid'
 import AppIcon from '@/app/components/base/app-icon'
+
 export type IHeaderProps = {
   title: string
   customerIcon?: React.ReactNode
@@ -8,6 +13,8 @@ export type IHeaderProps = {
   icon_background: string
   isMobile?: boolean
   isEmbedScene?: boolean
+  onShowSideBar?: () => void
+  onCreateNewChat?: () => void
 }
 const Header: FC<IHeaderProps> = ({
   title,
@@ -16,22 +23,25 @@ const Header: FC<IHeaderProps> = ({
   icon,
   icon_background,
   isEmbedScene = false,
+  onShowSideBar,
+  onCreateNewChat,
 }) => {
-  return !isMobile
-    ? null
-    : (
+  if (!isMobile)
+    return null
+
+  if (isEmbedScene) {
+    return (
       <div
-        className={`shrink-0 flex items-center justify-between h-12 px-3 bg-gray-100 ${
-          isEmbedScene ? 'bg-gradient-to-r from-blue-600 to-sky-500' : ''
-        }`}
+        className={`
+          shrink-0 flex items-center justify-between h-12 px-3 bg-gray-100 
+          bg-gradient-to-r from-blue-600 to-sky-500
+        `}
       >
         <div></div>
         <div className="flex items-center space-x-2">
           {customerIcon || <AppIcon size="small" icon={icon} background={icon_background} />}
           <div
-            className={`text-sm text-gray-800 font-bold ${
-              isEmbedScene ? 'text-white' : ''
-            }`}
+            className={'text-sm font-bold text-white'}
           >
             {title}
           </div>
@@ -39,6 +49,27 @@ const Header: FC<IHeaderProps> = ({
         <div></div>
       </div>
     )
+  }
+
+  return (
+    <div className="shrink-0 flex items-center justify-between h-12 px-3 bg-gray-100">
+      <div
+        className='flex items-center justify-center h-8 w-8 cursor-pointer'
+        onClick={() => onShowSideBar?.()}
+      >
+        <Bars3Icon className="h-4 w-4 text-gray-500" />
+      </div>
+      <div className='flex items-center space-x-2'>
+        <AppIcon size="small" icon={icon} background={icon_background} />
+        <div className=" text-sm text-gray-800 font-bold">{title}</div>
+      </div>
+      <div className='flex items-center justify-center h-8 w-8 cursor-pointer'
+        onClick={() => onCreateNewChat?.()}
+      >
+        <PencilSquareIcon className="h-4 w-4 text-gray-500" />
+      </div>
+    </div>
+  )
 }
 
 export default React.memo(Header)