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/chat/index.tsx

@@ -53,6 +53,7 @@ export type IChatProps = {
   isShowConfigElem?: boolean
   dataSets?: DataSet[]
   isShowCitationHitInfo?: boolean
+  isShowPromptLog?: boolean
 }
 
 const Chat: FC<IChatProps> = ({
@@ -81,6 +82,7 @@ const Chat: FC<IChatProps> = ({
   isShowConfigElem,
   dataSets,
   isShowCitationHitInfo,
+  isShowPromptLog,
 }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
@@ -186,7 +188,18 @@ const Chat: FC<IChatProps> = ({
               isShowCitationHitInfo={isShowCitationHitInfo}
             />
           }
-          return <Question key={item.id} id={item.id} content={item.content} more={item.more} useCurrentUserAvatar={useCurrentUserAvatar} />
+          return (
+            <Question
+              key={item.id}
+              id={item.id}
+              content={item.content}
+              more={item.more}
+              useCurrentUserAvatar={useCurrentUserAvatar}
+              item={item}
+              isShowPromptLog={isShowPromptLog}
+              isResponsing={isResponsing}
+            />
+          )
         })}
       </div>
       {

web/app/components/app/chat/log/index.tsx

@@ -0,0 +1,70 @@
+import type { Dispatch, FC, ReactNode, RefObject, SetStateAction } from 'react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { File02 } from '@/app/components/base/icons/src/vender/line/files'
+import PromptLogModal from '@/app/components/base/prompt-log-modal'
+import Tooltip from '@/app/components/base/tooltip'
+
+export type LogData = {
+  role: string
+  text: string
+}
+
+type LogProps = {
+  containerRef: RefObject<HTMLElement>
+  log: LogData[]
+  children?: (v: Dispatch<SetStateAction<boolean>>) => ReactNode
+}
+const Log: FC<LogProps> = ({
+  containerRef,
+  children,
+  log,
+}) => {
+  const { t } = useTranslation()
+  const [showModal, setShowModal] = useState(false)
+  const [width, setWidth] = useState(0)
+
+  const adjustModalWidth = () => {
+    if (containerRef.current)
+      setWidth(document.body.clientWidth - (containerRef.current?.clientWidth + 56 + 16))
+  }
+
+  useEffect(() => {
+    adjustModalWidth()
+  }, [])
+
+  return (
+    <>
+      {
+        children
+          ? children(setShowModal)
+          : (
+            <Tooltip selector='prompt-log-modal-trigger' content={t('common.operation.log') || ''}>
+              <div className={`
+                hidden absolute -left-[14px] -top-[14px] group-hover:block w-7 h-7
+                p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-md cursor-pointer
+              `}>
+                <div
+                  className='flex items-center justify-center rounded-md w-full h-full hover:bg-gray-100'
+                  onClick={() => setShowModal(true)}
+                >
+                  <File02 className='w-4 h-4 text-gray-500' />
+                </div>
+              </div>
+            </Tooltip>
+          )
+      }
+      {
+        showModal && (
+          <PromptLogModal
+            width={width}
+            log={log}
+            onCancel={() => setShowModal(false)}
+          />
+        )
+      }
+    </>
+  )
+}
+
+export default Log

web/app/components/app/chat/question/index.tsx

@@ -1,22 +1,34 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useRef } from 'react'
 import { useContext } from 'use-context-selector'
 import s from '../style.module.css'
 import type { IChatItem } from '../type'
+import Log from '../log'
 import MoreInfo from '../more-info'
 import AppContext from '@/context/app-context'
 import { Markdown } from '@/app/components/base/markdown'
 
-type IQuestionProps = Pick<IChatItem, 'id' | 'content' | 'more' | 'useCurrentUserAvatar'>
+type IQuestionProps = Pick<IChatItem, 'id' | 'content' | 'more' | 'useCurrentUserAvatar'> & {
+  isShowPromptLog?: boolean
+  item: IChatItem
+  isResponsing?: boolean
+}
 
-const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar }) => {
+const Question: FC<IQuestionProps> = ({ id, content, more, useCurrentUserAvatar, isShowPromptLog, item, isResponsing }) => {
   const { userProfile } = useContext(AppContext)
   const userName = userProfile?.name
+  const ref = useRef(null)
+
   return (
-    <div className='flex items-start justify-end' key={id}>
+    <div className={`flex items-start justify-end ${isShowPromptLog && 'first-of-type:pt-[14px]'}`} key={id} ref={ref}>
       <div className={s.questionWrapWrap}>
-        <div className={`${s.question} relative text-sm text-gray-900`}>
+        <div className={`${s.question} group relative text-sm text-gray-900`}>
+          {
+            isShowPromptLog && !isResponsing && (
+              <Log log={item.log!} containerRef={ref} />
+            )
+          }
           <div
             className={'mr-2 py-3 px-4 bg-blue-500 rounded-tl-2xl rounded-b-2xl'}
           >

web/app/components/app/chat/type.ts

@@ -66,6 +66,7 @@ export type IChatItem = {
   annotation?: Annotation
   useCurrentUserAvatar?: boolean
   isOpeningStatement?: boolean
+  log?: { role: string; text: string }[]
 }
 
 export type MessageEnd = {