From e68d1b88de32328b483032a2cddb0d18329cc91b Mon Sep 17 00:00:00 2001
From: KVOJJJin <jzongcode@gmail.com>
Date: Fri, 14 Jun 2024 13:58:51 +0800
Subject: [PATCH] Fix: conversation id display & support copy (#5195)

---
 web/app/components/app/log/list.tsx         | 16 ++++++-
 web/app/components/base/copy-icon/index.tsx | 50 +++++++++++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/base/copy-icon/index.tsx

diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index a3296da4d01948..c33067ad18df7f 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -44,6 +44,8 @@ import MessageLogModal from '@/app/components/base/message-log-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
 import useTimestamp from '@/hooks/use-timestamp'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { CopyIcon } from '@/app/components/base/copy-icon'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -281,7 +283,19 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
       <div className='border-b border-gray-100 py-4 px-6 flex items-center justify-between'>
         <div>
           <div className='text-gray-500 text-[10px] leading-[14px]'>{isChatMode ? t('appLog.detail.conversationId') : t('appLog.detail.time')}</div>
-          <div className='text-gray-700 text-[13px] leading-[18px]'>{isChatMode ? detail.id?.split('-').slice(-1)[0] : formatTime(detail.created_at, t('appLog.dateTimeFormat') as string)}</div>
+          {isChatMode && (
+            <div className='flex items-center text-gray-700 text-[13px] leading-[18px]'>
+              <TooltipPlus
+                hideArrow
+                popupContent={detail.id}>
+                <div className='max-w-[105px] truncate'>{detail.id}</div>
+              </TooltipPlus>
+              <CopyIcon content={detail.id} />
+            </div>
+          )}
+          {!isChatMode && (
+            <div className='text-gray-700 text-[13px] leading-[18px]'>{formatTime(detail.created_at, t('appLog.dateTimeFormat') as string)}</div>
+          )}
         </div>
         <div className='flex items-center flex-wrap gap-y-1 justify-end'>
           {!isAdvanced && (
diff --git a/web/app/components/base/copy-icon/index.tsx b/web/app/components/base/copy-icon/index.tsx
new file mode 100644
index 00000000000000..0d036e40983db3
--- /dev/null
+++ b/web/app/components/base/copy-icon/index.tsx
@@ -0,0 +1,50 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { debounce } from 'lodash-es'
+import copy from 'copy-to-clipboard'
+import TooltipPlus from '../tooltip-plus'
+import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+
+type Props = {
+  content: string
+}
+
+const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
+
+export const CopyIcon = ({ content }: Props) => {
+  const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const onClickCopy = debounce(() => {
+    copy(content)
+    setIsCopied(true)
+  }, 100)
+
+  const onMouseLeave = debounce(() => {
+    setIsCopied(false)
+  }, 100)
+
+  return (
+    <TooltipPlus
+      popupContent={
+        (isCopied
+          ? t(`${prefixEmbedded}.copied`)
+          : t(`${prefixEmbedded}.copy`)) || ''
+      }
+    >
+      <div onMouseLeave={onMouseLeave}>
+        {!isCopied
+          ? (
+            <Clipboard className='mx-1 w-3 h-3 text-gray-500 cursor-pointer' onClick={onClickCopy} />
+          )
+          : (
+            <ClipboardCheck className='mx-1 w-3 h-3 text-gray-500' />
+          )
+        }
+      </div>
+    </TooltipPlus>
+  )
+}
+
+export default CopyIcon