Skip to content

Commit 036a023

Browse files
ravikiranvmravikiranvm
committed
Update step settings AI chat
1 parent ac34158 commit 036a023

4 files changed

Lines changed: 160 additions & 71 deletions

File tree

‎packages/react-ui/src/app/features/builder/ai-chat/step-settings-assistant-ui-chat.tsx‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useTheme } from '@/app/common/providers/theme-provider';
2+
import { blocksHooks } from '@/app/features/blocks/lib/blocks-hook';
23
import {
34
AI_CHAT_CONTAINER_SIZES,
45
AiCliChatContainerSizeState,
56
cn,
67
StepSettingsAssistantUiChatContainer,
78
} from '@openops/components/ui';
8-
import { FlowVersion } from '@openops/shared';
9-
import { useCallback } from 'react';
9+
import { Action, flowHelper, FlowVersion, Trigger } from '@openops/shared';
10+
import { useCallback, useMemo } from 'react';
1011
import { useAiModelSelector } from '../../ai/lib/ai-model-selector-hook';
1112
import { useNetworkStatusWithWarning } from '../../ai/lib/hooks/use-network-status-with-warning';
1213
import { useStepSettingsAssistantChat } from '../assistant-ui/hooks/use-step-settings-assistant-chat';
@@ -81,6 +82,26 @@ const StepSettingsAssistantUiChat = ({
8182
const { isShowingSlowWarning, connectionError } =
8283
useNetworkStatusWithWarning(chatStatus);
8384

85+
const step = useMemo(() => {
86+
return flowHelper.getStep(flowVersion, selectedStep) as
87+
| Action
88+
| Trigger
89+
| undefined;
90+
}, [flowVersion, selectedStep]);
91+
92+
const { stepMetadata } = blocksHooks.useStepMetadata({
93+
step: step,
94+
enabled: !!step,
95+
});
96+
97+
const stepIndex = useMemo(() => {
98+
if (!step) {
99+
return undefined;
100+
}
101+
const steps = flowHelper.getAllSteps(flowVersion.trigger);
102+
return steps.findIndex((s) => s.name === step.name) + 1;
103+
}, [flowVersion, step]);
104+
84105
return (
85106
<StepSettingsAssistantUiChatContainer
86107
parentHeight={middlePanelSize.height}
@@ -107,6 +128,10 @@ const StepSettingsAssistantUiChat = ({
107128
})}
108129
isShowingSlowWarning={isShowingSlowWarning}
109130
connectionError={connectionError}
131+
stepLogoUrl={stepMetadata?.logoUrl}
132+
stepDisplayName={step?.displayName}
133+
stepIndex={stepIndex}
134+
blockDisplayName={stepMetadata?.displayName}
110135
></StepSettingsAssistantUiChatContainer>
111136
);
112137
};

‎packages/ui-components/src/components/assistant-ui/assistant-top-bar.tsx‎

Lines changed: 105 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { t } from 'i18next';
22
import { History, SquareArrowOutDownLeft, SquarePen } from 'lucide-react';
33
import { ReactNode } from 'react';
4+
import { BlockIcon } from '../../components/block-icon/block-icon';
45
import { TooltipWrapper } from '../../components/tooltip-wrapper';
56
import { useTypingAnimation } from '../../hooks/use-typing-animation';
67
import { cn } from '../../lib/cn';
@@ -17,6 +18,10 @@ type AssistantTopBarProps = {
1718
historyContent?: ReactNode;
1819
children: ReactNode;
1920
chatId?: string | null;
21+
stepLogoUrl?: string;
22+
stepDisplayName?: string;
23+
stepIndex?: number;
24+
blockDisplayName?: string;
2025
};
2126

2227
const AssistantTopBar = ({
@@ -29,6 +34,10 @@ const AssistantTopBar = ({
2934
children,
3035
chatId,
3136
isTitleDefault,
37+
stepLogoUrl,
38+
stepDisplayName,
39+
stepIndex,
40+
blockDisplayName,
3241
}: AssistantTopBarProps) => {
3342
const animatedTitle = useTypingAnimation({
3443
text: title,
@@ -37,77 +46,106 @@ const AssistantTopBar = ({
3746
enableAnimation: !isTitleDefault,
3847
});
3948

49+
const isStepSettingsMode =
50+
stepLogoUrl !== undefined &&
51+
blockDisplayName !== undefined &&
52+
stepIndex !== undefined &&
53+
stepDisplayName !== undefined;
54+
55+
const displayTitle = isStepSettingsMode
56+
? t('Generate with AI')
57+
: animatedTitle;
58+
4059
return (
41-
<div className="flex justify-between items-center px-4 py-2 gap-2 h-[61px] flex-shrink-0 text-md dark:text-primary font-bold border-b border-gray-200">
42-
<div className="flex items-center gap-2">
43-
{onHistoryOpenChange && (
44-
<Popover open={isHistoryOpen} onOpenChange={onHistoryOpenChange}>
45-
<TooltipWrapper
46-
tooltipText={
47-
isHistoryOpen ? t('Close history') : t('Open history')
48-
}
49-
tooltipPlacement={isHistoryOpen ? 'right' : 'bottom'}
50-
align="start"
60+
<div
61+
className={cn(
62+
'flex flex-col px-4 py-2 gap-2 flex-shrink-0 text-md dark:text-primary font-bold border-b border-gray-200',
63+
)}
64+
>
65+
<div className="flex justify-between items-center gap-2">
66+
<div className="flex items-center gap-2 flex-1 min-w-0">
67+
{onHistoryOpenChange && (
68+
<Popover open={isHistoryOpen} onOpenChange={onHistoryOpenChange}>
69+
<TooltipWrapper
70+
tooltipText={
71+
isHistoryOpen ? t('Close history') : t('Open history')
72+
}
73+
tooltipPlacement={isHistoryOpen ? 'right' : 'bottom'}
74+
align="start"
75+
>
76+
<PopoverTrigger asChild>
77+
<Button
78+
variant="secondary"
79+
size="icon"
80+
className={cn(
81+
'text-outline size-[23px] rounded-xs bg-gray-100 enabled:hover:bg-gray-200',
82+
isHistoryOpen && 'bg-gray-200',
83+
)}
84+
>
85+
<History size={13} />
86+
</Button>
87+
</PopoverTrigger>
88+
</TooltipWrapper>
89+
<PopoverContent
90+
className="w-[272px] h-[265px] p-0"
91+
align="start"
92+
side="bottom"
93+
sideOffset={8}
94+
onCloseAutoFocus={(e) => e.preventDefault()}
95+
>
96+
{historyContent}
97+
</PopoverContent>
98+
</Popover>
99+
)}
100+
<TooltipWrapper
101+
tooltipText={t('New chat')}
102+
tooltipPlacement={isHistoryOpen ? 'right' : 'bottom'}
103+
align="start"
104+
>
105+
<Button
106+
onClick={(e) => {
107+
e.stopPropagation();
108+
onNewChat();
109+
}}
110+
variant="secondary"
111+
size="icon"
112+
className="text-outline size-[23px] rounded-xs bg-gray-100 enabled:hover:bg-gray-200"
51113
>
52-
<PopoverTrigger asChild>
53-
<Button
54-
variant="secondary"
55-
size="icon"
56-
className={cn(
57-
'text-outline size-[23px] rounded-xs bg-gray-100 enabled:hover:bg-gray-200',
58-
isHistoryOpen && 'bg-gray-200',
59-
)}
60-
>
61-
<History size={13} />
62-
</Button>
63-
</PopoverTrigger>
64-
</TooltipWrapper>
65-
<PopoverContent
66-
className="w-[272px] h-[265px] p-0"
67-
align="start"
68-
side="bottom"
69-
sideOffset={8}
70-
onCloseAutoFocus={(e) => e.preventDefault()}
114+
<SquarePen size={13} />
115+
</Button>
116+
</TooltipWrapper>
117+
<span className="min-w-0 max-w-[240px] truncate">{displayTitle}</span>
118+
</div>
119+
<div className="flex items-center gap-2">
120+
{children}
121+
<TooltipWrapper tooltipText={t('Close')}>
122+
<Button
123+
size="icon"
124+
variant="basic"
125+
onClick={(e) => {
126+
e.stopPropagation();
127+
onClose();
128+
}}
129+
className="text-outline size-[36px]"
71130
>
72-
{historyContent}
73-
</PopoverContent>
74-
</Popover>
75-
)}
76-
<TooltipWrapper
77-
tooltipText={t('New chat')}
78-
tooltipPlacement={isHistoryOpen ? 'right' : 'bottom'}
79-
align="start"
80-
>
81-
<Button
82-
onClick={(e) => {
83-
e.stopPropagation();
84-
onNewChat();
85-
}}
86-
variant="secondary"
87-
size="icon"
88-
className="text-outline size-[23px] rounded-xs bg-gray-100 enabled:hover:bg-gray-200"
89-
>
90-
<SquarePen size={13} />
91-
</Button>
92-
</TooltipWrapper>
93-
<span className="min-w-0 max-w-[240px] truncate">{animatedTitle}</span>
94-
</div>
95-
<div className="flex items-center gap-2">
96-
{children}
97-
<TooltipWrapper tooltipText={t('Close')}>
98-
<Button
99-
size="icon"
100-
variant="basic"
101-
onClick={(e) => {
102-
e.stopPropagation();
103-
onClose();
104-
}}
105-
className="text-outline size-[36px]"
106-
>
107-
<SquareArrowOutDownLeft size={20} />
108-
</Button>
109-
</TooltipWrapper>
131+
<SquareArrowOutDownLeft size={20} />
132+
</Button>
133+
</TooltipWrapper>
134+
</div>
110135
</div>
136+
{isStepSettingsMode && (
137+
<div className="flex items-center gap-2 min-w-0">
138+
<BlockIcon
139+
logoUrl={stepLogoUrl}
140+
displayName={blockDisplayName}
141+
showTooltip={false}
142+
size="sm"
143+
/>
144+
<span className="min-w-0 truncate text-sm font-normal">
145+
{blockDisplayName} ({stepIndex}. {stepDisplayName})
146+
</span>
147+
</div>
148+
)}
111149
</div>
112150
);
113151
};

‎packages/ui-components/src/components/assistant-ui/assistant-ui-chat-container.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,13 @@ type AssistantUiChatContainerProps = {
1717
isTitleDefault?: boolean;
1818
} & ConnectionStatusProps &
1919
AssistantTopBarProps &
20-
ThreadProps;
20+
ThreadProps & {
21+
// Step settings specific props
22+
stepLogoUrl?: string;
23+
stepDisplayName?: string;
24+
stepIndex?: number;
25+
blockDisplayName?: string;
26+
};
2127

2228
const AssistantUiChatContainer = ({
2329
onClose,
@@ -38,6 +44,10 @@ const AssistantUiChatContainer = ({
3844
connectionError,
3945
chatId,
4046
isTitleDefault,
47+
stepLogoUrl,
48+
stepDisplayName,
49+
stepIndex,
50+
blockDisplayName,
4151
}: AssistantUiChatContainerProps) => {
4252
const codeVariation = useMemo(() => {
4353
return handleInject
@@ -56,6 +66,10 @@ const AssistantUiChatContainer = ({
5666
historyContent={children}
5767
chatId={chatId}
5868
isTitleDefault={isTitleDefault}
69+
stepLogoUrl={stepLogoUrl}
70+
stepDisplayName={stepDisplayName}
71+
stepIndex={stepIndex}
72+
blockDisplayName={blockDisplayName}
5973
>
6074
{null}
6175
</AssistantTopBar>

‎packages/ui-components/src/components/assistant-ui/step-settings-assistant-ui-chat-container.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ type StepSettingsAssistantUiChatContainerProps = {
3838
theme: Theme;
3939
handleInject: (code: string | SourceCode) => void;
4040
showFullWidth: boolean;
41+
stepLogoUrl?: string;
42+
stepDisplayName?: string;
43+
stepIndex?: number;
44+
blockDisplayName?: string;
4145
} & ConnectionStatusProps;
4246

4347
const StepSettingsAssistantUiChatContainer = ({
@@ -59,6 +63,10 @@ const StepSettingsAssistantUiChatContainer = ({
5963
showFullWidth,
6064
isShowingSlowWarning,
6165
connectionError,
66+
stepLogoUrl,
67+
stepDisplayName,
68+
stepIndex,
69+
blockDisplayName,
6270
}: StepSettingsAssistantUiChatContainerProps) => {
6371
const containerRef = useRef<HTMLDivElement>(null);
6472

@@ -105,9 +113,13 @@ const StepSettingsAssistantUiChatContainer = ({
105113
onNewChat={onNewChatClick}
106114
availableModels={availableModels}
107115
theme={theme}
108-
title={t('AI Chat')}
116+
title={t('Generate with AI')}
109117
isShowingSlowWarning={isShowingSlowWarning}
110118
connectionError={connectionError}
119+
stepLogoUrl={stepLogoUrl}
120+
stepDisplayName={stepDisplayName}
121+
stepIndex={stepIndex}
122+
blockDisplayName={blockDisplayName}
111123
>
112124
<div
113125
className="text-md dark:text-primary items-center font-bold flex"

0 commit comments

Comments
 (0)