Merge branch 'feat/workflow' into deploy/dev

langgenius · Mar 21, 2024 · 3b7fef8 · 3b7fef8
2 parents ea288a9 + 8e9ade1
commit 3b7fef8
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 19 deletions.
diff --git a/web/app/components/app/chat/answer/index.tsx b/web/app/components/app/chat/answer/index.tsx
@@ -248,8 +248,8 @@ const Answer: FC<IAnswerProps> = ({
             </div>
           )
         }
-        <div className={cn(s.answerWrapWrap, 'chat-answer-container group')}>
-          <div className={s.answerWrap}>
+        <div className={cn(s.answerWrapWrap, 'chat-answer-container')}>
+          <div className={cn(s.answerWrap, 'group')}>
             <div className={`${s.answer} relative text-sm text-gray-900`}>
               <div className={'ml-2 py-3 px-4 bg-gray-100 rounded-tr-2xl rounded-b-2xl'}>
                 {(isResponding && (isAgentMode ? (!content && (agent_thoughts || []).filter(item => !!item.thought || !!item.tool).length === 0) : !content))
@@ -311,15 +311,15 @@ const Answer: FC<IAnswerProps> = ({
                   )
                 }
               </div>
-              <div className='absolute top-[-14px] right-[-14px] flex flex-row justify-end gap-1'>
+              <div className='absolute top-[-14px] left-[-6px] flex flex-row justify-end gap-1'>
                 {!item.isOpeningStatement && (
                   <CopyBtn
                     value={content}
                     className={cn(s.copyBtn, 'mr-1')}
                   />
                 )}
                 {((isShowPromptLog && !isResponding) || (!item.isOpeningStatement && isShowTextToSpeech)) && (
-                  <div className='hidden group-hover:flex items-center h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
+                  <div className='hidden group-hover:flex items-center w-max h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
                     {isShowPromptLog && !isResponding && (
                       <Log logItem={item} />
                     )}

diff --git a/web/app/components/app/chat/log/index.tsx b/web/app/components/app/chat/log/index.tsx
@@ -16,7 +16,7 @@ const Log: FC<LogProps> = ({
 
   return (
     <div
-      className='p-1 flex items-center justify-center rounded-[6px] hover:bg-gray-50 cursor-pointer'
+      className='shrink-0 p-1 flex items-center justify-center rounded-[6px] font-medium text-gray-500 hover:bg-gray-50 cursor-pointer hover:text-gray-700'
       onClick={(e) => {
         e.stopPropagation()
         e.nativeEvent.stopImmediatePropagation()
@@ -27,8 +27,8 @@ const Log: FC<LogProps> = ({
           setShowPromptLogModal(true)
       }}
     >
-      <File02 className='mr-1 w-4 h-4 text-gray-500' />
-      <div className='text-xs leading-4 text-gray-500'>{runID ? t('appLog.viewLog') : t('appLog.promptLog')}</div>
+      <File02 className='mr-1 w-4 h-4' />
+      <div className='text-xs leading-4'>{runID ? t('appLog.viewLog') : t('appLog.promptLog')}</div>
     </div>
   )
 }

diff --git a/web/app/components/base/chat/chat/answer/index.tsx b/web/app/components/base/chat/chat/answer/index.tsx
@@ -69,7 +69,7 @@ const Answer: FC<AnswerProps> = ({
           )
         }
       </div>
-      <div className='chat-answer-container grow w-0 group ml-4'>
+      <div className='chat-answer-container grow w-0 ml-4'>
         <div className='relative pr-10'>
           <AnswerTriangle className='absolute -left-2 top-0 w-2 h-3 text-gray-100' />
           <div

diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -67,7 +67,7 @@ const Operation: FC<OperationProps> = ({
   }
 
   return (
-    <div className='absolute top-[-14px] right-[-14px] flex justify-end gap-1'>
+    <div className='absolute top-[-14px] left-[-14px] flex justify-end gap-1'>
       {!isOpeningStatement && (
         <CopyBtn
           value={content}
@@ -76,7 +76,7 @@ const Operation: FC<OperationProps> = ({
       )}
 
       {!isOpeningStatement && (
-        <div className='hidden group-hover:flex items-center h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
+        <div className='hidden group-hover:flex items-center w-max h-[28px] p-0.5 rounded-lg bg-white border-[0.5px] border-gray-100 shadow-md'>
           {showPromptLog && (
             <Log logItem={item} />
           )}

diff --git a/...app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx b/...app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx
@@ -48,6 +48,7 @@ export type ModelParameterModalProps = {
   onDebugWithMultipleModelChange?: () => void
   renderTrigger?: (v: TriggerProps) => ReactNode
   readonly?: boolean
+  isInWorkflow?: boolean
 }
 const stopParameerRule: ModelParameterRule = {
   default: [],
@@ -83,6 +84,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   onDebugWithMultipleModelChange,
   renderTrigger,
   readonly,
+  isInWorkflow,
 }) => {
   const { t } = useTranslation()
   const { hasSettedApiKey } = useProviderContext()
@@ -198,6 +200,7 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
               : (
                 <Trigger
                   disabled={disabled}
+                  isInWorkflow={isInWorkflow}
                   modelDisabled={modelDisabled}
                   hasDeprecated={hasDeprecated}
                   currentProvider={currentProvider}

diff --git a/...p/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/...p/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
 import type {
   Model,
   ModelItem,
@@ -13,6 +14,7 @@ import { useProviderContext } from '@/context/provider-context'
 import { SlidersH } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
 
 export type TriggerProps = {
   open?: boolean
@@ -23,6 +25,7 @@ export type TriggerProps = {
   modelId?: string
   hasDeprecated?: boolean
   modelDisabled?: boolean
+  isInWorkflow?: boolean
 }
 const Trigger: FC<TriggerProps> = ({
   disabled,
@@ -32,17 +35,20 @@ const Trigger: FC<TriggerProps> = ({
   modelId,
   hasDeprecated,
   modelDisabled,
+  isInWorkflow,
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
   const { modelProviders } = useProviderContext()
 
   return (
     <div
-      className={`
-        flex items-center px-2 h-8 rounded-lg border cursor-pointer hover:border-[1.5px]
-        ${disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'}
-      `}
+      className={cn(
+        'relative flex items-center px-2 h-8 rounded-lg  cursor-pointer',
+        !isInWorkflow && 'border hover:border-[1.5px]',
+        !isInWorkflow && (disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'),
+        isInWorkflow && 'bg-gray-100 border border-gray-100  hover:border-gray-200',
+      )}
     >
       {
         currentProvider && (
@@ -68,9 +74,9 @@ const Trigger: FC<TriggerProps> = ({
             className='mr-1.5 text-gray-900'
             modelItem={currentModel}
             showMode
-            modeClassName='!text-[#444CE7] !border-[#A4BCFD]'
+            modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
             showFeatures
-            featuresClassName='!text-[#444CE7] !border-[#A4BCFD]'
+            featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
           />
         )
       }
@@ -97,9 +103,10 @@ const Trigger: FC<TriggerProps> = ({
             </TooltipPlus>
           )
           : (
-            <SlidersH className='w-4 h-4 text-indigo-600' />
+            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'w-4 h-4')} />
           )
       }
+      {isInWorkflow && (<ChevronDown className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
     </div>
   )
 }

diff --git a/web/app/components/workflow/custom-edge.tsx b/web/app/components/workflow/custom-edge.tsx
@@ -83,7 +83,7 @@ const CustomEdge = ({
       <EdgeLabelRenderer>
         <div
           className={`
-            nopan nodrag
+            nopan nodrag hover:scale-150 transition-all
             ${data?._hovering ? 'block' : 'hidden'}
             ${open && '!block'}
           `}
@@ -99,6 +99,7 @@ const CustomEdge = ({
             asChild
             onSelect={handleInsert}
             availableBlocksTypes={intersection(availablePrevNodes, availableNextNodes)}
+            triggerClassName={() => 'hover:scale-150 transition-all'}
           />
         </div>
       </EdgeLabelRenderer>

diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -69,6 +69,7 @@ export const NodeTargetHandle = memo(({
         className={`
           !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
           after:absolute after:w-0.5 after:h-2 after:left-1.5 after:top-1 after:bg-primary-500
+          hover:scale-150 transition-all
           ${!connected && 'after:opacity-0'}
           ${data.type === BlockEnum.Start && 'opacity-0'}
           ${handleClassName}
@@ -88,6 +89,7 @@ export const NodeTargetHandle = memo(({
                 hidden absolute left-0 top-0 pointer-events-none
                 ${nodeSelectorClassName}
                 group-hover:flex
+                group-hover:scale-150
                 ${open && '!flex'}
               `}
               availableBlocksTypes={availablePrevNodes}
@@ -149,6 +151,7 @@ export const NodeSourceHandle = memo(({
         className={`
           !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
           after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500
+          hover:scale-150 transition-all
           ${!connected && 'after:opacity-0'}
           ${handleClassName}
         `}
@@ -163,7 +166,7 @@ export const NodeSourceHandle = memo(({
               onSelect={handleSelect}
               asChild
               triggerClassName={open => `
-                hidden absolute top-0 left-0 pointer-events-none
+                hidden absolute top-0 left-0 pointer-events-none 
                 ${nodeSelectorClassName}
                 group-hover:flex
                 ${open && '!flex'}

diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -119,6 +119,7 @@ const Panel: FC<NodePanelProps<LLMNodeType>> = ({
         >
           <ModelParameterModal
             popupClassName='!w-[387px]'
+            isInWorkflow
             isAdvancedMode={true}
             mode={model?.mode}
             provider={model?.provider}