feat: [frontend] support vision (#1518)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/app/log/list.tsx

@@ -33,7 +33,6 @@ import { TONE_LIST } from '@/config'
 import ModelIcon from '@/app/components/app/configuration/config-model/model-icon'
 import ModelName from '@/app/components/app/configuration/config-model/model-name'
 import ModelModeTypeLabel from '@/app/components/app/configuration/config-model/model-mode-type-label'
-import { ModelModeType } from '@/types/app'
 
 type IConversationList = {
   logs?: ChatConversationsResponse | CompletionConversationsResponse
@@ -81,6 +80,7 @@ const getFormattedChatList = (messages: ChatMessage[]) => {
       content: item.inputs.query || item.inputs.default_input || item.query, // text generation: item.inputs.query; chat: item.query
       isAnswer: false,
       log: item.message as any,
+      message_files: item.message_files,
     })
 
     newChatList.push({
@@ -174,9 +174,12 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
     const itemContent = item[Object.keys(item)[0]]
     return {
       label: itemContent.variable,
-      value: varValues[itemContent.variable],
+      value: varValues[itemContent.variable] || detail.message?.inputs?.[itemContent.variable],
     }
   })
+  const message_files = (!isChatMode && detail.message.message_files && detail.message.message_files.length > 0)
+    ? detail.message.message_files.map((item: any) => item.url)
+    : []
 
   const getParamValue = (param: string) => {
     const value = detail?.model_config.model?.completion_params?.[param] || '-'
@@ -209,7 +212,7 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
           <div className='text-[13px] text-gray-900 font-medium'>
             <ModelName modelId={modelName} modelDisplayName={modelName} />
           </div>
-          <ModelModeTypeLabel type={ModelModeType.chat} isHighlight />
+          <ModelModeTypeLabel type={detail?.model_config.model.mode as any} isHighlight />
         </div>
         <Popover
           position='br'
@@ -239,11 +242,15 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
 
     </div>
     {/* Panel Body */}
-    {varList.length > 0 && (
+    {(varList.length > 0 || (!isChatMode && message_files.length > 0)) && (
       <div className='px-6 pt-4 pb-2'>
-        <VarPanel varList={varList} />
+        <VarPanel
+          varList={varList}
+          message_files={message_files}
+        />
       </div>
     )}
+
     {!isChatMode
       ? <div className="px-2.5 py-4">
         <Chat

web/app/components/app/log/var-panel.tsx

@@ -1,19 +1,24 @@
 'use client'
 import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronDown, ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
+import ImagePreview from '@/app/components/base/image-uploader/image-preview'
 
 type Props = {
   varList: { label: string; value: string }[]
+  message_files: string[]
 }
 
 const VarPanel: FC<Props> = ({
   varList,
+  message_files,
 }) => {
   const { t } = useTranslation()
   const [isCollapse, { toggle: toggleCollapse }] = useBoolean(false)
+  const [imagePreviewUrl, setImagePreviewUrl] = useState('')
+
   return (
     <div className='rounded-xl border border-color-indigo-100 bg-indigo-25'>
       <div
@@ -30,7 +35,7 @@ const VarPanel: FC<Props> = ({
       {!isCollapse && (
         <div className='px-6 pb-3'>
           {varList.map(({ label, value }, index) => (
-            <div key={index} className='flex py-1 leading-[18px] text-[13px]'>
+            <div key={index} className='flex py-2 leading-[18px] text-[13px]'>
               <div className='shrink-0 w-[128px] flex text-primary-600'>
                 <span className='shrink-0 opacity-60'>{'{{'}</span>
                 <span className='truncate'>{label}</span>
@@ -39,9 +44,32 @@ const VarPanel: FC<Props> = ({
               <div className='pl-2.5 break-all'>{value}</div>
             </div>
           ))}
+
+          {message_files.length > 0 && (
+            <div className='mt-1 flex py-2'>
+              <div className='shrink-0 w-[128px] leading-[18px] text-[13px] font-medium text-gray-700'>{t('appLog.detail.uploadImages')}</div>
+              <div className="flex space-x-2">
+                {message_files.map((url, index) => (
+                  <div
+                    key={index}
+                    className="ml-2.5 w-16 h-16 rounded-lg bg-no-repeat bg-cover bg-center cursor-pointer"
+                    style={{ backgroundImage: `url(${url})` }}
+                    onClick={() => setImagePreviewUrl(url)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
         </div>
       )}
-
+      {
+        imagePreviewUrl && (
+          <ImagePreview
+            url={imagePreviewUrl}
+            onCancel={() => setImagePreviewUrl('')}
+          />
+        )
+      }
     </div>
   )
 }