feat(api,dashboard): novu copilot in the step editor fixes NV-7154 (#10439)

Author: LetItRock

.source

@@ -12,7 +12,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
     className={cn('relative flex-1 overflow-y-hidden', className)}
-    initial="smooth"
+    initial="instant"
     resize="smooth"
     role="log"
     {...props}

apps/dashboard/src/components/ai-elements/conversation.tsx

@@ -608,6 +608,7 @@ export const PromptInput = ({
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
+    event.stopPropagation();
 
     const form = event.currentTarget;
     const text = usingProvider

apps/dashboard/src/components/ai-elements/prompt-input.tsx

@@ -45,6 +45,7 @@ export type AiChatResourceConfig = {
   resourceType: AiResourceTypeEnum;
   resourceId?: string;
   agentType: AiAgentTypeEnum;
+  metadata?: Record<string, unknown>;
   isResourceLoading?: boolean;
   onRefetchResource?: () => void;
   onData?: (data: { type: string }) => void;
@@ -118,6 +119,7 @@ export function AiChatProvider({ children, config }: { children: React.ReactNode
     resourceType,
     resourceId,
     agentType,
+    metadata,
     isResourceLoading = false,
     onRefetchResource,
     onData,
@@ -200,7 +202,16 @@ export function AiChatProvider({ children, config }: { children: React.ReactNode
         });
       },
     });
-  const dataRef = useDataRef({ isGenerating, resourceType, resourceId, agentType, isAborted, latestChat, messages });
+  const dataRef = useDataRef({
+    isGenerating,
+    resourceType,
+    resourceId,
+    agentType,
+    isAborted,
+    latestChat,
+    messages,
+    metadata,
+  });
 
   const { keepChanges, isPending: isKeepPending } = useKeepAiChanges();
   const { revertMessage, isPending: isRevertPending } = useRevertMessage();
@@ -267,7 +278,7 @@ export function AiChatProvider({ children, config }: { children: React.ReactNode
 
   const handleSendMessage = useCallback(
     async (message: string) => {
-      const { resourceType, resourceId, agentType, latestChat, messages } = dataRef.current;
+      const { resourceType, resourceId, agentType, latestChat, messages, metadata } = dataRef.current;
       const isLastUserMessage = messages.length > 0 && messages[messages.length - 1].role === AiMessageRoleEnum.USER;
 
       const messageToSend = message.trim();
@@ -280,12 +291,17 @@ export function AiChatProvider({ children, config }: { children: React.ReactNode
           resourceType,
           agentType,
         });
-        sendPrompt({ chatId: newChat._id, prompt: messageToSend });
+        sendPrompt({ chatId: newChat._id, prompt: messageToSend, metadata: { ...metadata } });
       } else if (isLastUserMessage) {
         const lastUserMessage = messages.filter((m) => m.role === AiMessageRoleEnum.USER).pop();
-        sendPrompt({ messageId: lastUserMessage?.id, chatId: latestChat._id, prompt: messageToSend });
+        sendPrompt({
+          messageId: lastUserMessage?.id,
+          chatId: latestChat._id,
+          prompt: messageToSend,
+          metadata: { ...metadata },
+        });
       } else if (messageToSend) {
-        sendPrompt({ chatId: latestChat._id, prompt: messageToSend });
+        sendPrompt({ chatId: latestChat._id, prompt: messageToSend, metadata: { ...metadata } });
       }
 
       track(TelemetryEvent.COPILOT_MESSAGE_SENT, {

apps/dashboard/src/components/ai-sidekick/ai-chat-context.tsx

@@ -1,5 +1,5 @@
 import { ChatStatus, UIMessage } from 'ai';
-import { useMemo } from 'react';
+import { FormEvent, useMemo } from 'react';
 import { Conversation, ConversationContent, ConversationScrollButton } from '../ai-elements/conversation';
 import { Message } from '../ai-elements/message';
 import {
@@ -106,7 +106,10 @@ export const ChatBody = ({
   const isSubmitGuard = !inputText.trim() || isGenerating || isSubmitDisabled;
   const isSubmitButtonDisabled = (!inputText.trim() && !isGenerating) || isSubmitDisabled;
 
-  const onSubmitHandler = (message: PromptInputMessage) => {
+  const onSubmitHandler = (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+
     if (isSubmitGuard) return;
 
     onSubmit(message.text);
@@ -193,6 +196,15 @@ export const ChatBody = ({
             <PromptInputTextarea
               onChange={(event) => onInputChange(event.target.value)}
               value={inputText}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+                  e.preventDefault();
+
+                  if (!isSubmitGuard) {
+                    onSubmit(inputText);
+                  }
+                }
+              }}
               placeholder="Ask for changes… eg: Make the workflow high severity.."
             />
           </PromptInputBody>

apps/dashboard/src/components/ai-sidekick/chat-body.tsx

@@ -11,8 +11,11 @@ import {
   RiEdit2Line,
   RiLoader3Line,
 } from 'react-icons/ri';
+import { useNavigate } from 'react-router-dom';
+import { useEnvironment } from '@/context/environment/hooks';
 import { STEP_TYPE_TO_COLOR } from '@/utils/color';
 import { StepTypeEnum } from '@/utils/enums';
+import { buildRoute, ROUTES } from '@/utils/routes';
 import { cn } from '@/utils/ui';
 import { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtStep } from '../ai-elements/chain-of-thought';
 import { Shimmer } from '../ai-elements/shimmer';
@@ -22,6 +25,7 @@ import { Badge } from '../primitives/badge';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../primitives/collapsible';
 import { Skeleton } from '../primitives/skeleton';
 import { Tag } from '../primitives/tag';
+import { useWorkflow } from '../workflow-editor/workflow-provider';
 import { StyledMessageResponse } from './chat-message-response';
 import { isCancelledToolCall, unwrapToolResult } from './message-utils';
 
@@ -175,11 +179,40 @@ function WorkflowStepItem({
   isStreaming: boolean;
   action: 'add' | 'edit' | 'remove';
 }) {
+  const navigate = useNavigate();
+  const { workflow } = useWorkflow();
+  const { currentEnvironment } = useEnvironment();
   const showStreaming = isStreaming || !output;
   const stepType = (output?.type ?? StepTypeEnum.IN_APP) as StepTypeEnum;
   const Icon = STEP_TYPE_TO_ICON[stepType] ?? STEP_TYPE_TO_ICON[StepTypeEnum.IN_APP];
   const color = STEP_TYPE_TO_COLOR[stepType] ?? STEP_TYPE_TO_COLOR[StepTypeEnum.IN_APP];
 
+  const matchedStep = useMemo(
+    () => workflow?.steps.find((s) => s.stepId === output?.stepId),
+    [workflow?.steps, output?.stepId]
+  );
+  const isClickable = !!matchedStep && action !== 'remove';
+  const routeStepType = (matchedStep?.type ?? stepType) as StepTypeEnum;
+
+  const handleClick = () => {
+    if (!isClickable || !matchedStep) return;
+
+    const baseParams = {
+      environmentSlug: currentEnvironment?.slug ?? '',
+      workflowSlug: workflow?.slug ?? '',
+    };
+
+    const stepRoute =
+      routeStepType === StepTypeEnum.DELAY ||
+      routeStepType === StepTypeEnum.DIGEST ||
+      routeStepType === StepTypeEnum.THROTTLE
+        ? ROUTES.EDIT_STEP
+        : ROUTES.EDIT_STEP_TEMPLATE;
+
+    const absolutePath = `${buildRoute(ROUTES.EDIT_WORKFLOW, baseParams)}/${buildRoute(stepRoute, { stepSlug: matchedStep.slug })}`;
+    navigate(absolutePath);
+  };
+
   return (
     <AnimatePresence mode="wait">
       {showStreaming ? (
@@ -201,10 +234,11 @@ function WorkflowStepItem({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           transition={stepTransition}
-          className={cn(stepItemBaseClasses, 'bg-bg-weak')}
+          className={cn(stepItemBaseClasses, 'bg-bg-weak', isClickable && 'cursor-pointer hover:bg-bg-weak/80')}
+          onClick={isClickable ? handleClick : undefined}
         >
           <div
-            className="flex size-5 items-center justify-center border opacity-40 rounded-full"
+            className="flex size-5 min-w-5 items-center justify-center border opacity-40 rounded-full"
             style={{ borderColor: `hsl(var(--${color}))`, color: `hsl(var(--${color}))` }}
           >
             <Icon className="size-3" />

apps/dashboard/src/components/ai-sidekick/chat-chain-of-thought.tsx

@@ -3,7 +3,7 @@ import { Badge } from '../primitives/badge';
 import { useAiChat } from './ai-chat-context';
 import { ChatBody, ChatBodySkeleton } from './chat-body';
 
-export function NovuCopilotPanel() {
+export function NovuCopilotPanel({ hideHeader }: { hideHeader?: boolean }) {
   const {
     hasNoChatHistory,
     messages,
@@ -27,27 +27,29 @@ export function NovuCopilotPanel() {
 
   return (
     <div className="flex h-full w-full min-w-0 flex-col overflow-hidden bg-white">
-      <div className="flex shrink-0 items-center justify-between gap-3 border-b px-3 py-2">
-        <div className="flex items-center gap-0.5 rounded px-0.5 py-1">
-          <div className="flex size-5 items-center justify-center">
-            <BroomSparkle className="size-3" isAnimating={isGenerating} />
+      {!hideHeader && (
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b px-3 py-2">
+          <div className="flex items-center gap-0.5 rounded px-0.5 py-1">
+            <div className="flex size-5 items-center justify-center">
+              <BroomSparkle className="size-3" isAnimating={isGenerating} />
+            </div>
+            <span
+              className="text-label-sm font-medium"
+              style={{
+                background: 'linear-gradient(90deg, #939292 0%, #646464 100%)',
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+                backgroundClip: 'text',
+              }}
+            >
+              Novu Copilot
+            </span>
+            <Badge variant="lighter" color="gray" className="ml-1">
+              BETA
+            </Badge>
           </div>
-          <span
-            className="text-label-sm font-medium"
-            style={{
-              background: 'linear-gradient(90deg, #939292 0%, #646464 100%)',
-              WebkitBackgroundClip: 'text',
-              WebkitTextFillColor: 'transparent',
-              backgroundClip: 'text',
-            }}
-          >
-            Novu Copilot
-          </span>
-          <Badge variant="lighter" color="gray" className="ml-1">
-            BETA
-          </Badge>
         </div>
-      </div>
+      )}
       {isLoading ? (
         <ChatBodySkeleton />
       ) : (

apps/dashboard/src/components/ai-sidekick/novu-copilot-panel.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useEscapeKeyManager } from '@/context/escape-key-manager/hooks';
 import { EscapeKeyManagerPriority } from '@/context/escape-key-manager/priority';
 import { useTelemetry } from '@/hooks/use-telemetry';
@@ -56,12 +56,15 @@ export function CommandPaletteProvider({ children }: { children: React.ReactNode
     };
   }, [toggleCommandPalette]);
 
-  const value = {
-    isOpen,
-    openCommandPalette,
-    closeCommandPalette,
-    toggleCommandPalette,
-  };
+  const value = useMemo(
+    () => ({
+      isOpen,
+      openCommandPalette,
+      closeCommandPalette,
+      toggleCommandPalette,
+    }),
+    [isOpen, openCommandPalette, closeCommandPalette, toggleCommandPalette]
+  );
 
   return <CommandPaletteContext.Provider value={value}>{children}</CommandPaletteContext.Provider>;
 }