message log style modified

2024-03-18 20:53:17 +08:00 · 2024-03-18 20:53:17 +08:00 · 202492e5ac
parent 601e888fde
commit 202492e5ac
4 changed files with 71 additions and 54 deletions
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@ -192,6 +192,7 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
  }, [appDetail?.id, detail.id, appDetail?.mode])

  const isChatMode = appDetail?.mode !== 'completion'
+  const isAdvanced = appDetail?.mode === 'advanced-chat'

  const targetTone = TONE_LIST.find((item: any) => {
    let res = true
@ -201,21 +202,21 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
    return res
  })?.name ?? 'custom'

-  const modelName = (detail.model_config as any).model.name
-  const provideName = (detail.model_config as any).model.provider as any
+  const modelName = (detail.model_config as any).model?.name
+  const provideName = (detail.model_config as any).model?.provider as any
  const {
    currentModel,
    currentProvider,
  } = useTextGenerationCurrentProviderAndModelAndModelList(
    { provider: provideName, model: modelName },
  )
-  const varList = (detail.model_config as any).user_input_form.map((item: any) => {
+  const varList = (detail.model_config as any).user_input_form?.map((item: any) => {
    const itemContent = item[Object.keys(item)[0]]
    return {
      label: 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)
    : []
@ -253,40 +254,44 @@ function DetailPanel<T extends ChatConversationFullDetailResponse | CompletionCo
          <div className='text-gray-700 text-[13px] leading-[18px]'>{isChatMode ? detail.id?.split('-').slice(-1)[0] : dayjs.unix(detail.created_at).format(t('appLog.dateTimeFormat') as string)}</div>
        </div>
        <div className='flex items-center flex-wrap gap-y-1 justify-end'>
-          <div
-            className={cn('mr-2 flex items-center border h-8 px-2 space-x-2 rounded-lg bg-indigo-25 border-[#2A87F5]')}
-          >
-            <ModelIcon
-              className='!w-5 !h-5'
-              provider={currentProvider}
-              modelName={currentModel?.model}
-            />
-            <ModelName
-              modelItem={currentModel!}
-              showMode
-            />
-          </div>
-          <Popover
-            position='br'
-            className='!w-[280px]'
-            btnClassName='mr-4 !bg-gray-50 !py-1.5 !px-2.5 border-none font-normal'
-            btnElement={<>
-              <span className='text-[13px]'>{targetTone}</span>
-              <InformationCircleIcon className='h-4 w-4 text-gray-800 ml-1.5' />
-            </>}
-            htmlContent={<div className='w-[280px]'>
-              <div className='flex justify-between py-2 px-4 font-medium text-sm text-gray-700'>
-                <span>Tone of responses</span>
-                <div>{targetTone}</div>
+          {!isAdvanced && (
+            <>
+              <div
+                className={cn('mr-2 flex items-center border h-8 px-2 space-x-2 rounded-lg bg-indigo-25 border-[#2A87F5]')}
+              >
+                <ModelIcon
+                  className='!w-5 !h-5'
+                  provider={currentProvider}
+                  modelName={currentModel?.model}
+                />
+                <ModelName
+                  modelItem={currentModel!}
+                  showMode
+                />
              </div>
-              {['temperature', 'top_p', 'presence_penalty', 'max_tokens', 'stop'].map((param: string, index: number) => {
-                return <div className='flex justify-between py-2 px-4 bg-gray-50' key={index}>
-                  <span className='text-xs text-gray-700'>{PARAM_MAP[param as keyof typeof PARAM_MAP]}</span>
-                  <span className='text-gray-800 font-medium text-xs'>{getParamValue(param)}</span>
-                </div>
-              })}
-            </div>}
-          />
+              <Popover
+                position='br'
+                className='!w-[280px]'
+                btnClassName='mr-4 !bg-gray-50 !py-1.5 !px-2.5 border-none font-normal'
+                btnElement={<>
+                  <span className='text-[13px]'>{targetTone}</span>
+                  <InformationCircleIcon className='h-4 w-4 text-gray-800 ml-1.5' />
+                </>}
+                htmlContent={<div className='w-[280px]'>
+                  <div className='flex justify-between py-2 px-4 font-medium text-sm text-gray-700'>
+                    <span>Tone of responses</span>
+                    <div>{targetTone}</div>
+                  </div>
+                  {['temperature', 'top_p', 'presence_penalty', 'max_tokens', 'stop'].map((param: string, index: number) => {
+                    return <div className='flex justify-between py-2 px-4 bg-gray-50' key={index}>
+                      <span className='text-xs text-gray-700'>{PARAM_MAP[param as keyof typeof PARAM_MAP]}</span>
+                      <span className='text-gray-800 font-medium text-xs'>{getParamValue(param)}</span>
+                    </div>
+                  })}
+                </div>}
+              />
+            </>
+          )}
          <div className='w-6 h-6 rounded-lg flex items-center justify-center hover:cursor-pointer hover:bg-gray-100'>
            <XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
          </div>
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@ -28,7 +28,6 @@ import Button from '@/app/components/base/button'
 import { StopCircle } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import MessageLogModal from '@/app/components/base/message-log-modal'

 export type ChatProps = {
  chatList: ChatItem[]
@ -77,7 +76,7 @@ const Chat: FC<ChatProps> = ({
  onFeedback,
 }) => {
  const { t } = useTranslation()
-  const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showMessageLogModal, setShowMessageLogModal } = useAppStore()
+  const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal } = useAppStore()
  const [width, setWidth] = useState(0)
  const chatContainerRef = useRef<HTMLDivElement>(null)
  const chatContainerInnerRef = useRef<HTMLDivElement>(null)
@ -248,17 +247,6 @@ const Chat: FC<ChatProps> = ({
            }}
          />
        )}
-        {showMessageLogModal && (
-          <MessageLogModal
-            fixedWidth
-            width={width}
-            currentLogItem={currentLogItem}
-            onCancel={() => {
-              setCurrentLogItem()
-              setShowMessageLogModal(false)
-            }}
-          />
-        )}
      </div>
    </ChatContextProvider>
  )
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@ -37,11 +37,19 @@ const MessageLogModal: FC<MessageLogModalProps> = ({

  return (
    <div
-      className={cn('fixed bottom-2 flex flex-col py-3 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10')}
+      className={cn('relative flex flex-col py-3 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10')}
      style={{
-        width: fixedWidth ? 400 : width,
-        top: fixedWidth ? 56 + 56 : 56 + 8,
-        left: fixedWidth ? `${8 + width - 400 - 200}px` : '8px',
+        width,
+        ...(!fixedWidth
+          ? {
+            position: 'fixed',
+            top: 56 + 8,
+            left: 8,
+            bottom: 16,
+          }
+          : {
+            marginRight: 8,
+          }),
      }}
      ref={ref}
    >
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@ -13,6 +13,8 @@ import DebugAndPreview from './debug-and-preview'
 import RunHistory from './run-history'
 import Record from './record'
 import InputsPanel from './inputs-panel'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import MessageLogModal from '@/app/components/base/message-log-modal'

 const Panel: FC = () => {
  const nodes = useNodes<CommonNodeType>()
@ -22,6 +24,7 @@ const Panel: FC = () => {
  const selectedNode = nodes.find(node => node.data.selected)
  const showRunHistory = useStore(state => state.showRunHistory)
  const showInputsPanel = useStore(s => s.showInputsPanel)
+  const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal } = useAppStore()
  const {
    showWorkflowInfoPanel,
    showNodePanel,
@ -46,6 +49,19 @@ const Panel: FC = () => {
          <InputsPanel />
        )
      }
+      {
+        showMessageLogModal && (
+          <MessageLogModal
+            fixedWidth
+            width={400}
+            currentLogItem={currentLogItem}
+            onCancel={() => {
+              setCurrentLogItem()
+              setShowMessageLogModal(false)
+            }}
+          />
+        )
+      }
      {
        runningStatus && !isChatMode && workflowRunId && (
          <Record />