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

chat mode

This commit is contained in:
StyleZhang 2024-03-07 14:24:27 +08:00
parent 8f3d9d0149
commit af99a55552
9 changed files with 45 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/workflow/block-selector/tabs.tsx
View File

@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
import { groupBy } from 'lodash-es'
import BlockIcon from '../block-icon'
import { BlockEnum } from '../types'
import { useIsChatMode } from '../hooks'
import { BLOCK_CLASSIFICATIONS } from './constants'
import {
useBlocks,
@ -15,7 +16,6 @@ import {
import type { ToolDefaultValue } from './types'
import { TabsEnum } from './types'
import Tools from './tools'
import { useStore as useAppStore } from '@/app/components/app/store'
export type TabsProps = {
onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void
@ -24,7 +24,7 @@ const Tabs: FC<TabsProps> = ({
onSelect,
}) => {
const { t } = useTranslation()
const appDetail = useAppStore(state => state.appDetail)
const isChatMode = useIsChatMode()
const blocks = useBlocks()
const tabs = useTabs()
const [activeTab, setActiveTab] = useState(tabs[0].key)
@ -65,7 +65,7 @@ const Tabs: FC<TabsProps> = ({
}
{
groupBy(blocks, 'classification')[classification].filter((block) => {
if (block.type === BlockEnum.DirectAnswer && appDetail?.mode === 'workflow')
if (block.type === BlockEnum.DirectAnswer && !isChatMode)
return false
return true

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

@ -5,6 +5,7 @@ import {
} from 'react'
import { useTranslation } from 'react-i18next'
import { useStore } from '../store'
import { useIsChatMode } from '../hooks'
import RunAndHistory from './run-and-history'
import EditingTitle from './editing-title'
import RunningTitle from './running-title'
@ -18,6 +19,7 @@ import { Mode } from '@/app/components/workflow/types'
const Header: FC = () => {
const { t } = useTranslation()
const appDetail = useAppStore(state => state.appDetail)
const isChatMode = useIsChatMode()
const mode = useStore(state => state.mode)
const runTaskId = useStore(state => state.runTaskId)
@ -59,7 +61,7 @@ const Header: FC = () => {
<RunAndHistory />
<div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
{
appDetail?.mode === 'advanced-chat' && (
isChatMode && (
<Button
className={`
mr-2 px-3 py-0 h-8 bg-white text-[13px] font-medium text-gray-700

12
web/app/components/workflow/header/run-and-history.tsx
View File

@ -2,16 +2,16 @@ import type { FC } from 'react'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { useStore } from '../store'
import { useIsChatMode } from '../hooks'
import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
import TooltipPlus from '@/app/components/base/tooltip-plus'
import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
import { Mode } from '@/app/components/workflow/types'
import { useStore as useAppStore } from '@/app/components/app/store'
const RunAndHistory: FC = () => {
const { t } = useTranslation()
const appDetail = useAppStore(state => state.appDetail)
const isChatMode = useIsChatMode()
const mode = useStore(state => state.mode)
const showRunHistory = useStore(state => state.showRunHistory)
@ -22,7 +22,7 @@ const RunAndHistory: FC = () => {
flex items-center px-1.5 h-7 rounded-md text-[13px] font-medium text-primary-600
hover:bg-primary-50 cursor-pointer
${mode === 'running' && 'bg-primary-50 !cursor-not-allowed'}
${mode === 'running' && appDetail?.mode !== 'workflow' && 'opacity-50'}
${mode === 'running' && isChatMode && 'opacity-50'}
`}
onClick={() => mode !== 'running' && useStore.setState({ mode: Mode.Running })}
>
@ -31,12 +31,12 @@ const RunAndHistory: FC = () => {
? (
<>
{
appDetail?.mode === 'workflow' && (
!isChatMode && (
<Loading02 className='mr-1 w-4 h-4 animate-spin' />
)
}
{
appDetail?.mode === 'workflow'
!isChatMode
? t('workflow.common.running')
: t('workflow.common.inPreview')
}
@ -46,7 +46,7 @@ const RunAndHistory: FC = () => {
<>
<Play className='mr-1 w-4 h-4' />
{
appDetail?.mode === 'workflow'
!isChatMode
? t('workflow.common.run')
: t('workflow.common.preview')
}

6
web/app/components/workflow/hooks.ts
View File

@ -27,6 +27,12 @@ import { syncWorkflowDraft } from '@/service/workflow'
import { useFeaturesStore } from '@/app/components/base/features/hooks'
import { useStore as useAppStore } from '@/app/components/app/store'
export const useIsChatMode = () => {
const appDetail = useAppStore(s => s.appDetail)
return appDetail?.mode === 'advanced-chat'
}
export const useNodesInitialData = () => {
const { t } = useTranslation()

25
web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
View File

@ -13,6 +13,7 @@ import {
PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'
import type { Node } from '@/app/components/workflow/types'
import { BlockEnum } from '@/app/components/workflow/types'
type PanelOperatorProps = {
id: string
@ -61,15 +62,21 @@ const PanelOperator = ({
{t('workflow.panel.helpLink')}
</div>
</div>
<div className='h-[1px] bg-gray-100'></div>
<div className='p-1'>
<div
className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
onClick={() => handleNodeDelete(id)}
>
{t('common.operation.delete')}
</div>
</div>
{
data.type !== BlockEnum.Start && (
<>
<div className='h-[1px] bg-gray-100'></div>
<div className='p-1'>
<div
className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
onClick={() => handleNodeDelete(id)}
>
{t('common.operation.delete')}
</div>
</div>
</>
)
}
<div className='h-[1px] bg-gray-100'></div>
<div className='p-1'>
<div className='px-3 py-2 text-xs text-gray-500'>

5
web/app/components/workflow/operator/index.tsx
View File

@ -1,16 +1,19 @@
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import ZoomInOut from './zoom-in-out'
import { OrganizeGrid } from '@/app/components/base/icons/src/vender/line/layout'
import TooltipPlus from '@/app/components/base/tooltip-plus'
const Operator = () => {
const { t } = useTranslation()
return (
<div className={`
absolute left-6 bottom-6 flex items-center p-0.5
rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500 z-10
`}>
<ZoomInOut />
<TooltipPlus popupContent='Organize blocks'>
<TooltipPlus popupContent={t('workflow.panel.organizeBlocks')}>
<div className='ml-[1px] flex items-center justify-center w-8 h-8 cursor-pointer hover:bg-black/5 rounded-lg'>
<OrganizeGrid className='w-4 h-4' />
</div>

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

@ -7,14 +7,14 @@ import { useNodes } from 'reactflow'
import type { CommonNodeType } from '../types'
import { Panel as NodePanel } from '../nodes'
import { useStore } from '../store'
import { useIsWorkflow } from '../hooks'
import WorkflowInfo from './workflow-info'
import DebugAndPreview from './debug-and-preview'
import RunHistory from './run-history'
import Record from './record'
import { useStore as useAppStore } from '@/app/components/app/store'
const Panel: FC = () => {
const appDetail = useAppStore(state => state.appDetail)
const isWorkflow = useIsWorkflow()
const runTaskId = useStore(state => state.runTaskId)
const nodes = useNodes<CommonNodeType>()
const selectedNode = nodes.find(node => node.data._selected)
@ -25,11 +25,11 @@ const Panel: FC = () => {
showDebugAndPreviewPanel,
} = useMemo(() => {
return {
showWorkflowInfoPanel: appDetail?.mode === 'workflow' && !selectedNode && !runTaskId,
showWorkflowInfoPanel: isWorkflow && !selectedNode && !runTaskId,
showNodePanel: !!selectedNode && !runTaskId,
showDebugAndPreviewPanel: appDetail?.mode === 'advanced-chat' && !selectedNode && !runTaskId,
showDebugAndPreviewPanel: !isWorkflow && !selectedNode && !runTaskId,
}
}, [selectedNode, appDetail, runTaskId])
}, [selectedNode, isWorkflow, runTaskId])
return (
<div className='absolute top-14 right-0 bottom-2 flex z-10'>

1
web/i18n/en-US/workflow.ts
View File

@ -64,6 +64,7 @@ const translation = {
runThisStep: 'Run this step',
checklist: 'Checklist',
checklistTip: 'Make sure all issues are resolved before publishing',
organizeBlocks: 'Organize blocks',
},
nodes: {
common: {

1
web/i18n/zh-Hans/workflow.ts
View File

@ -64,6 +64,7 @@ const translation = {
runThisStep: '运行此步骤',
checklist: '检查清单',
checklistTip: '发布前确保所有问题均已解决',
organizeBlocks: '整理节点',
},
nodes: {
common: {