feat: advanced prompt (#1330)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>

web/app/components/app/text-generate/item/index.tsx

@@ -1,21 +1,24 @@
 'use client'
-import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
+import type { Dispatch, FC, SetStateAction } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import copy from 'copy-to-clipboard'
+import { useParams } from 'next/navigation'
 import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 import { useBoolean } from 'ahooks'
 import { HashtagIcon } from '@heroicons/react/24/solid'
+import PromptLog from '@/app/components/app/chat/log'
 import { Markdown } from '@/app/components/base/markdown'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'
 import type { Feedbacktype } from '@/app/components/app/chat/type'
 import { fetchMoreLikeThis, updateFeedback } from '@/service/share'
-import { Clipboard } from '@/app/components/base/icons/src/vender/line/files'
+import { Clipboard, File02 } from '@/app/components/base/icons/src/vender/line/files'
 import { Bookmark } from '@/app/components/base/icons/src/vender/line/general'
 import { Stars02 } from '@/app/components/base/icons/src/vender/line/weather'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
+import { fetchTextGenerationMessge } from '@/service/debug'
 const MAX_DEPTH = 3
 export type IGenerationItemProps = {
   className?: string
@@ -23,7 +26,9 @@ export type IGenerationItemProps = {
   onRetry: () => void
   content: string
   messageId?: string | null
+  conversationId?: string
   isLoading?: boolean
+  isResponsing?: boolean
   isInWebApp?: boolean
   moreLikeThis?: boolean
   depth?: number
@@ -64,6 +69,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
   content,
   messageId,
   isLoading,
+  isResponsing,
   moreLikeThis,
   isInWebApp = false,
   feedback,
@@ -77,14 +83,16 @@ const GenerationItem: FC<IGenerationItemProps> = ({
   controlClearMoreLikeThis,
 }) => {
   const { t } = useTranslation()
+  const params = useParams()
   const isTop = depth === 1
-
+  const ref = useRef(null)
   const [completionRes, setCompletionRes] = useState('')
   const [childMessageId, setChildMessageId] = useState<string | null>(null)
   const hasChild = !!childMessageId
   const [childFeedback, setChildFeedback] = useState<Feedbacktype>({
     rating: null,
   })
+  const [promptLog, setPromptLog] = useState<{ role: string; text: string }[]>([])
 
   const handleFeedback = async (childFeedback: Feedbacktype) => {
     await updateFeedback({ url: `/messages/${childMessageId}/feedbacks`, body: { rating: childFeedback.rating } }, isInstalledApp, installedAppId)
@@ -150,8 +158,17 @@ const GenerationItem: FC<IGenerationItemProps> = ({
       setChildMessageId(null)
   }, [isLoading])
 
+  const handleOpenLogModal = async (setModal: Dispatch<SetStateAction<boolean>>) => {
+    const data = await fetchTextGenerationMessge({
+      appId: params.appId,
+      messageId: messageId!,
+    })
+    setPromptLog(data.message as any || [])
+    setModal(true)
+  }
+
   return (
-    <div className={cn(className, isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0')}
+    <div ref={ref} className={cn(className, isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0')}
       style={isTop
         ? {
           boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
@@ -186,6 +203,26 @@ const GenerationItem: FC<IGenerationItemProps> = ({
 
             <div className='flex items-center justify-between mt-3'>
               <div className='flex items-center'>
+                {
+                  !isInWebApp && !isInstalledApp && !isResponsing && (
+                    <PromptLog
+                      log={promptLog}
+                      containerRef={ref}
+                    >
+                      {
+                        showModal => (
+                          <SimpleBtn
+                            isDisabled={isError || !messageId}
+                            className={cn(isMobile && '!px-1.5', 'space-x-1 mr-2')}
+                            onClick={() => handleOpenLogModal(showModal)}>
+                            <File02 className='w-3.5 h-3.5' />
+                            {!isMobile && <div>{t('common.operation.log')}</div>}
+                          </SimpleBtn>
+                        )
+                      }
+                    </PromptLog>
+                  )
+                }
                 <SimpleBtn
                   isDisabled={isError || !messageId}
                   className={cn(isMobile && '!px-1.5', 'space-x-1')}