Files
dify/web/app/components/workflow/skill/start-tab-item.tsx
yyh 98d1aac765 feat(skill-editor): add persistent Start tab and optimize store subscriptions
- Add START_TAB_ID constant and StartTabItem/StartTabContent components
- Default to Start tab when no file tabs are open
- Optimize zustand selectors to subscribe to specific Map values instead of
  entire Map objects, reducing unnecessary re-renders when other tabs change
- Refactor useSkillFileSave to accept precise values instead of Map/Set
2026-01-23 13:12:22 +08:00

56 lines
1.5 KiB
TypeScript

'use client'
import type { FC } from 'react'
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import Home from '@/app/components/base/icons/src/vender/workflow/Home'
import { cn } from '@/utils/classnames'
type StartTabItemProps = {
isActive: boolean
onClick: () => void
}
const StartTabItem: FC<StartTabItemProps> = ({
isActive,
onClick,
}) => {
const { t } = useTranslation('workflow')
return (
<div
className={cn(
'relative flex shrink-0 items-center border-r border-components-panel-border-subtle',
isActive ? 'bg-components-panel-bg' : 'bg-transparent hover:bg-state-base-hover',
)}
>
<button
type="button"
className={cn(
'flex items-center gap-1 px-2.5 pb-2 pt-2.5',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-components-input-border-active',
)}
onClick={onClick}
>
<div className="flex size-5 shrink-0 items-center justify-center">
<Home className={cn(
'size-4',
isActive ? 'text-text-secondary' : 'text-text-tertiary',
)}
/>
</div>
<span
className={cn(
'text-[13px] font-medium uppercase leading-4',
isActive ? 'text-text-primary' : 'text-text-tertiary',
)}
>
{t('skillSidebar.startTab')}
</span>
</button>
</div>
)
}
export default React.memo(StartTabItem)