opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

checklist

This commit is contained in:
StyleZhang 2024-03-28 18:24:10 +08:00
parent 12ed31be4d
commit 06a6d398cd
11 changed files with 150 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/base/icons/assets/vender/line/general/checklist.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Icon">
<path id="Vector" d="M8.75 11H14M8.75 5H14M2 5.75L3.125 6.5L5.375 3.5M2 11.75L3.125 12.5L5.375 9.5" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 307 B

39
web/app/components/base/icons/src/vender/line/general/Checklist.json Normal file
View File

@ -0,0 +1,39 @@
{
"icon": {
"type": "element",
"isRootNode": true,
"name": "svg",
"attributes": {
"width": "16",
"height": "16",
"viewBox": "0 0 16 16",
"fill": "none",
"xmlns": "http://www.w3.org/2000/svg"
},
"children": [
{
"type": "element",
"name": "g",
"attributes": {
"id": "Icon"
},
"children": [
{
"type": "element",
"name": "path",
"attributes": {
"id": "Vector",
"d": "M8.75 11H14M8.75 5H14M2 5.75L3.125 6.5L5.375 3.5M2 11.75L3.125 12.5L5.375 9.5",
"stroke": "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
},
"children": []
}
]
}
]
},
"name": "Checklist"
}

16
web/app/components/base/icons/src/vender/line/general/Checklist.tsx Normal file
View File

@ -0,0 +1,16 @@
// GENERATE BY script
// DON NOT EDIT IT MANUALLY
import * as React from 'react'
import data from './Checklist.json'
import IconBase from '@/app/components/base/icons/IconBase'
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
props,
ref,
) => <IconBase {...props} ref={ref} data={data as IconData} />)
Icon.displayName = 'Checklist'
export default Icon

1
web/app/components/base/icons/src/vender/line/general/index.ts
View File

@ -3,6 +3,7 @@ export { default as Bookmark } from './Bookmark'
export { default as CheckCircle } from './CheckCircle'
export { default as CheckDone01 } from './CheckDone01'
export { default as Check } from './Check'
export { default as Checklist } from './Checklist'
export { default as DotsGrid } from './DotsGrid'
export { default as DotsHorizontal } from './DotsHorizontal'
export { default as Edit02 } from './Edit02'

48
web/app/components/workflow/header/checklist.tsx Normal file
View File

@ -0,0 +1,48 @@
import {
memo,
useState,
} from 'react'
import {
PortalToFollowElem,
PortalToFollowElemContent,
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import { Checklist } from '@/app/components/base/icons/src/vender/line/general'
const WorkflowChecklist = () => {
const [open, setOpen] = useState(false)
return (
<PortalToFollowElem
placement='bottom-end'
offset={{
mainAxis: 12,
crossAxis: -4,
}}
open={open}
onOpenChange={setOpen}
>
<PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
<div className='flex items-center justify-center p-0.5 w-8 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs'>
<div
className={`
group flex items-center justify-center w-full h-full rounded-md cursor-pointer
hover:bg-primary-50
${open && 'bg-primary-50'}
`}
>
<Checklist
className={`
w-4 h-4 group-hover:text-primary-600
${open ? 'text-primary-600' : 'text-gray-500'}`
}
/>
</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent></PortalToFollowElemContent>
</PortalToFollowElem>
)
}
export default memo(WorkflowChecklist)

3
web/app/components/workflow/header/index.tsx
View File

@ -18,6 +18,7 @@ import EditingTitle from './editing-title'
import RunningTitle from './running-title'
import RestoringTitle from './restoring-title'
import Publish from './publish'
import Checklist from './checklist'
import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
import Button from '@/app/components/base/button'
import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
@ -118,6 +119,7 @@ const Header: FC = () => {
{t('workflow.common.features')}
</Button>
<Publish />
<Checklist />
</div>
)
}
@ -148,6 +150,7 @@ const Header: FC = () => {
>
{t('workflow.common.restore')}
</Button>
<Checklist />
</div>
)
}

2
web/app/components/workflow/nodes/_base/panel.tsx
View File

@ -79,7 +79,7 @@ const BasePanel: FC<BasePanelProps> = ({
}, [handleNodeDataUpdateWithSyncDraft, id])
return (
<div className='relative h-full'>
<div className='relative mr-2 h-full'>
<div
ref={triggerRef}
className='absolute top-1/2 -translate-y-1/2 -left-2 w-1 h-6 bg-gray-300 rounded-sm cursor-col-resize resize-x'></div>

36
web/app/components/workflow/panel/chat-record/index.tsx
View File

@ -70,18 +70,30 @@ const ChatRecord = () => {
}
return (
<Chat
config={{} as any}
chatList={chatMessageList}
chatContainerclassName='px-4'
chatContainerInnerClassName='pt-6'
chatFooterClassName='px-4 rounded-b-2xl'
chatFooterInnerClassName='pb-4'
chatNode={<UserInput />}
noChatInput
allToolIcons={{}}
showPromptLog
/>
<div
className={`
flex flex-col w-[400px] rounded-l-2xl h-full border border-black/[0.02] shadow-xl
`}
style={{
background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
}}
>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
{`TEST CHAT#${historyWorkflowData?.sequence_number}`}
</div>
<Chat
config={{} as any}
chatList={chatMessageList}
chatContainerclassName='px-4'
chatContainerInnerClassName='pt-6'
chatFooterClassName='px-4 rounded-b-2xl'
chatFooterInnerClassName='pb-4'
chatNode={<UserInput />}
noChatInput
allToolIcons={{}}
showPromptLog
/>
</div>
)
}

15
web/app/components/workflow/panel/index.tsx
View File

@ -14,6 +14,7 @@ import RunHistory from './run-history'
import Record from './record'
import InputsPanel from './inputs-panel'
import WorkflowPreview from './workflow-preview'
import ChatRecord from './chat-record'
import { useStore as useAppStore } from '@/app/components/app/store'
import MessageLogModal from '@/app/components/base/message-log-modal'
@ -46,12 +47,7 @@ const Panel: FC = () => {
])
return (
<div
className={`
absolute top-14 right-0 bottom-2 flex pr-2 z-10
${(showRunHistory || showDebugAndPreviewPanel) && '!pr-0'}
`}
>
<div className='absolute top-14 right-0 bottom-2 flex z-10'>
{
showMessageLogModal && (
<MessageLogModal
@ -66,10 +62,15 @@ const Panel: FC = () => {
)
}
{
historyWorkflowData && (
historyWorkflowData && !isChatMode && (
<Record />
)
}
{
historyWorkflowData && isChatMode && (
<ChatRecord />
)
}
{
showDebugAndPreviewPanel && (
<DebugAndPreview />

32
web/app/components/workflow/panel/record.tsx
View File

@ -1,45 +1,21 @@
import {
memo,
// useCallback,
} from 'react'
import {
useIsChatMode,
// useWorkflow,
} from '../hooks'
import { memo } from 'react'
import { useIsChatMode } from '../hooks'
import Run from '../run'
import { useStore } from '../store'
import ChatRecord from './chat-record'
// import type { WorkflowRunDetailResponse } from '@/models/log'
const Record = () => {
const isChatMode = useIsChatMode()
// const { renderTreeFromRecord } = useWorkflow()
const historyWorkflowData = useStore(s => s.historyWorkflowData)
// const getResultCallback = useCallback((res: WorkflowRunDetailResponse) => {
// const { graph } = res
// renderTreeFromRecord(graph.nodes, graph.edges, graph.viewport)
// }, [renderTreeFromRecord])
return (
<div className={`
flex flex-col h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
${isChatMode ? 'w-[320px]' : 'w-[400px]'}
`}>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
{`Test ${isChatMode ? 'Chat' : 'Run'}#${historyWorkflowData?.sequence_number}`}
{`Test Run#${historyWorkflowData?.sequence_number}`}
</div>
{
isChatMode
? <ChatRecord />
: (
<Run
runID={historyWorkflowData?.id || ''}
// getResultCallback={getResultCallback}
/>
)
}
<Run runID={historyWorkflowData?.id || ''} />
</div>
)
}

2
web/app/components/workflow/panel/run-history.tsx
View File

@ -38,7 +38,7 @@ const RunHistory = () => {
return null
return (
<div className='flex flex-col ml-2 w-[200px] h-full bg-white border-[0.5px] border-gray-200 shadow-xl rounded-l-2xl'>
<div className='absolute -top-2 right-2 flex flex-col ml-2 w-[240px] min-h-[214px] bg-white border-[0.5px] border-gray-200 shadow-xl rounded-xl overflow-y-auto z-[11]'>
<div className='shrink-0 flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'>
{t('workflow.common.runHistory')}
<div