Feat/regenrate conversation in embeded window (#1708)

web/app/components/app/chat/icon-component/index.tsx

@@ -35,3 +35,9 @@ export const TryToAskIcon = (
     <path d="M5.88889 0.683718C5.827 0.522805 5.67241 0.416626 5.5 0.416626C5.3276 0.416626 5.173 0.522805 5.11111 0.683718L4.27279 2.86334C4.14762 3.18877 4.10829 3.28255 4.05449 3.35821C4.00051 3.43413 3.93418 3.50047 3.85826 3.55445C3.78259 3.60825 3.68881 3.64758 3.36338 3.77275L1.18376 4.61106C1.02285 4.67295 0.916668 4.82755 0.916668 4.99996C0.916668 5.17236 1.02285 5.32696 1.18376 5.38885L3.36338 6.22717C3.68881 6.35234 3.78259 6.39167 3.85826 6.44547C3.93418 6.49945 4.00051 6.56578 4.05449 6.6417C4.10829 6.71737 4.14762 6.81115 4.27279 7.13658L5.11111 9.3162C5.173 9.47711 5.3276 9.58329 5.5 9.58329C5.67241 9.58329 5.82701 9.47711 5.8889 9.3162L6.72721 7.13658C6.85238 6.81115 6.89171 6.71737 6.94551 6.6417C6.99949 6.56578 7.06583 6.49945 7.14175 6.44547C7.21741 6.39167 7.31119 6.35234 7.63662 6.22717L9.81624 5.38885C9.97715 5.32696 10.0833 5.17236 10.0833 4.99996C10.0833 4.82755 9.97715 4.67295 9.81624 4.61106L7.63662 3.77275C7.31119 3.64758 7.21741 3.60825 7.14175 3.55445C7.06583 3.50047 6.99949 3.43413 6.94551 3.35821C6.89171 3.28255 6.85238 3.18877 6.72721 2.86334L5.88889 0.683718Z" fill="#667085" />
   </svg>
 )
+
+export const ReplayIcon = ({ className }: SVGProps<SVGElement>) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.33301 6.66667C1.33301 6.66667 2.66966 4.84548 3.75556 3.75883C4.84147 2.67218 6.34207 2 7.99967 2C11.3134 2 13.9997 4.68629 13.9997 8C13.9997 11.3137 11.3134 14 7.99967 14C5.26428 14 2.95642 12.1695 2.23419 9.66667M1.33301 6.66667V2.66667M1.33301 6.66667H5.33301" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+)

web/app/components/share/chatbot/index.tsx

@@ -534,6 +534,19 @@ const Main: FC<IMainProps> = ({
     createNewChat()
   }
 
+  const handleConversationIdChange = (id: string) => {
+    if (id === '-1') {
+      createNewChat()
+      setConversationIdChangeBecauseOfNew(true)
+    }
+    else {
+      setConversationIdChangeBecauseOfNew(false)
+    }
+    // trigger handleConversationSwitch
+    setCurrConversationId(id, appId)
+    setIsShowSuggestion(false)
+  }
+
   const difyIcon = (
     <LogoHeader />
   )
@@ -556,6 +569,7 @@ const Main: FC<IMainProps> = ({
         icon_background={siteInfo.icon_background}
         isEmbedScene={true}
         isMobile={isMobile}
+        onCreateNewChat={() => handleConversationIdChange('-1')}
       />
 
       <div className={'flex bg-white overflow-hidden'}>

web/app/components/share/header.tsx

@@ -4,7 +4,10 @@ import {
   Bars3Icon,
   PencilSquareIcon,
 } from '@heroicons/react/24/solid'
+import { useTranslation } from 'react-i18next'
 import AppIcon from '@/app/components/base/app-icon'
+import { ReplayIcon } from '@/app/components/app/chat/icon-component'
+import Tooltip from '@/app/components/base/tooltip'
 
 export type IHeaderProps = {
   title: string
@@ -26,6 +29,7 @@ const Header: FC<IHeaderProps> = ({
   onShowSideBar,
   onCreateNewChat,
 }) => {
+  const { t } = useTranslation()
   if (!isMobile)
     return null
 
@@ -37,7 +41,6 @@ const Header: FC<IHeaderProps> = ({
           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
@@ -46,7 +49,17 @@ const Header: FC<IHeaderProps> = ({
             {title}
           </div>
         </div>
-        <div></div>
+        <Tooltip
+          selector={'embed-scene-restart-button'}
+          htmlContent={t('share.chat.resetChat')}
+          position='top'
+        >
+          <div className='flex cursor-pointer hover:rounded-lg hover:bg-black/5 w-8 h-8 items-center justify-center' onClick={() => {
+            onCreateNewChat?.()
+          }}>
+            <ReplayIcon className="h-4 w-4 text-sm font-bold text-white" />
+          </div>
+        </Tooltip>
       </div>
     )
   }