feat(agentStudio): new conversation fixes

Author: pipeline1987

packages/docsearch-core/src/DocSearch.tsx

@@ -54,6 +54,7 @@ export interface DocSearchContext {
   isModalActive: boolean;
   onAskAiToggle: OnAskAiToggle;
   initialAskAiMessage: InitialAskAiMessage | undefined;
+  clearInitialAskAiMessage: () => void;
   registerView: (view: View) => void;
   isHybridModeSupported: boolean;
 }
@@ -183,6 +184,10 @@ function DocSearchInner(
     [setDocsearchState, setInitialQuery],
   );
 
+  const clearInitialAskAiMessage = React.useCallback((): void => {
+    setInitialAskAiMessage(undefined);
+  }, []);
+
   const registerView = React.useCallback(
     (view: View): void => {
       if (registeredViews.has(view)) return;
@@ -246,6 +251,7 @@ function DocSearchInner(
       isModalActive,
       onAskAiToggle,
       initialAskAiMessage,
+      clearInitialAskAiMessage,
       registerView,
       isHybridModeSupported,
     }),
@@ -260,6 +266,7 @@ function DocSearchInner(
       isModalActive,
       onAskAiToggle,
       initialAskAiMessage,
+      clearInitialAskAiMessage,
       registerView,
       isHybridModeSupported,
     ],

packages/docsearch-css/src/sidepanel.css

@@ -19,12 +19,16 @@
   --docsearch-sidepanel-hit-highlight-color: var(--docsearch-hit-highlight-color);
   --docsearch-sidepanel-button-background: var(--docsearch-sidepanel-background);
   --docsearch-sidepanel-button-background-dark: var(--docsearch-sidepanel-background);
+  --docsearch-sidepanel-thread-depth-banner-bg: #fff1f2;
+  --docsearch-sidepanel-thread-depth-banner-border: #fecdd3;
 }
 
 html[data-theme='dark'] {
   --docsearch-sidepanel-text-base: var(--docsearch-text-color);
   --docsearch-sidepanel-primary-disabled: rgba(1, 45, 186, 0.60);
   --docsearch-sidepanel-button-background-dark: rgba(4, 4, 8, 1);
+  --docsearch-sidepanel-thread-depth-banner-bg: rgb(239 83 80 / 12%);
+  --docsearch-sidepanel-thread-depth-banner-border: rgb(254 205 211 / 35%);
 }
 
 .DocSearch-SidepanelButton {
@@ -623,9 +627,38 @@ html[data-theme="dark"] .DocSearch-Sidepanel-Prompt--stop:hover {
   flex-direction: column;
 }
 
-.DocSearch-Sidepanel-ConversationScreen-threadDepth {
-  margin: 0 1rem 0.75rem;
+@keyframes docsearch-sidepanel-thread-depth-banner-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.DocSearch-Sidepanel .DocSearch-Sidepanel-ThreadDepthBanner {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
   flex-shrink: 0;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  background-color: var(--docsearch-sidepanel-thread-depth-banner-bg);
+  border: 1px solid var(--docsearch-sidepanel-thread-depth-banner-border);
+  box-sizing: border-box;
+  color: var(--docsearch-sidepanel-text-base);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 400;
+  width: 100%;
+  animation: docsearch-sidepanel-thread-depth-banner-enter 0.3s ease-out;
+}
+
+.DocSearch-Sidepanel .DocSearch-Sidepanel-ThreadDepthBanner p {
+  margin: 0;
 }
 
 @media screen and (min-width: 769px) {

packages/docsearch-react/src/DocSearchModal.tsx

@@ -398,8 +398,18 @@ export function DocSearchModal({
 
   const [stoppedStream, setStoppedStream] = React.useState(false);
 
-  const { messages, status, setMessages, sendMessage, stopAskAiStreaming, askAiError, sendFeedback, conversations } =
-    useAskAi({
+  const {
+    messages,
+    status,
+    sendMessage,
+    stopAskAiStreaming,
+    askAiError,
+    sendFeedback,
+    conversations,
+    clearError,
+    resetAskAiAbortScope,
+    resetAskAiChatSession,
+  } = useAskAi({
       assistantId: askAiConfigurationId,
       apiKey: askAiConfig?.apiKey || apiKey,
       appId: askAiConfig?.appId || appId,
@@ -423,9 +433,12 @@ export function DocSearchModal({
         };
       }
 
-      for (const part of messages[0].parts) {
-        if (part.type === 'text') {
-          conversations.add(buildDummyAskAiHit(part.text, messages));
+      const first = messages[0];
+      if (first?.parts) {
+        for (const part of first.parts) {
+          if (part.type === 'text') {
+            conversations.add(buildDummyAskAiHit(part.text, messages));
+          }
         }
       }
     }
@@ -533,6 +546,8 @@ export function DocSearchModal({
       if (isHybridModeSupported) return;
 
       setStoppedStream(false);
+      resetAskAiAbortScope();
+      clearError();
 
       const messageOptions: ChatRequestOptions = {};
 
@@ -571,7 +586,16 @@ export function DocSearchModal({
         autocompleteRef.current.setQuery('');
       }
     },
-    [onAskAiToggle, interceptAskAiEvent, sendMessage, askAiState, setAskAiState, isHybridModeSupported],
+    [
+      onAskAiToggle,
+      interceptAskAiEvent,
+      askAiState,
+      setAskAiState,
+      isHybridModeSupported,
+      clearError,
+      resetAskAiAbortScope,
+      sendMessage,
+    ],
   );
 
   // feedback handler
@@ -623,7 +647,10 @@ export function DocSearchModal({
                     },
                     onSelect({ item }): void {
                       if (item.messages) {
-                        setMessages(item.messages as any);
+                        resetAskAiChatSession({
+                          kind: 'setMessages',
+                          messages: item.messages as AIMessage[],
+                        });
                         onAskAiToggle(true);
                       }
                     },
@@ -793,14 +820,18 @@ export function DocSearchModal({
     };
   }, []);
 
-  // Refresh the autocomplete results when ask ai is toggled off
-  // helps return to the previous ac state and start screen
+  // Refresh autocomplete and rotate the chat session only when Ask AI is turned off — not on every
+  // mount while inactive. `clearError` from `useChat` can change when `chatSessionId` changes; listing
+  // it (and re-running `resetAskAiChatSession` on that) caused an infinite update loop.
+  const prevIsAskAiActiveRef = React.useRef(isAskAiActive);
   React.useEffect(() => {
-    if (!isAskAiActive) {
+    if (prevIsAskAiActiveRef.current && !isAskAiActive) {
       autocomplete.refresh();
-      setMessages([]);
+      clearError();
+      resetAskAiChatSession();
     }
-  }, [isAskAiActive, autocomplete, setMessages]);
+    prevIsAskAiActiveRef.current = isAskAiActive;
+  }, [isAskAiActive, autocomplete, clearError, resetAskAiChatSession]);
 
   // Track external state in order to manage internal askAiState
   React.useEffect(() => {
@@ -814,7 +845,8 @@ export function DocSearchModal({
   };
 
   const handleNewConversation = (): void => {
-    setMessages([]);
+    clearError();
+    resetAskAiChatSession();
     setAskAiState('new-conversation');
   };
 
@@ -913,7 +945,10 @@ export function DocSearchModal({
                 if (item.type === 'askAI' && item.query) {
                   // if the item is askAI and the anchor is stored
                   if (item.anchor === 'stored' && 'messages' in item) {
-                    setMessages(item.messages as any);
+                    resetAskAiChatSession({
+                      kind: 'setMessages',
+                      messages: item.messages as AIMessage[],
+                    });
                     const initialMessage: InitialAskAiMessage = {
                       query: item.query,
                       messageId: (item.messages as StoredAskAiMessage[])[0].id,

packages/docsearch-react/src/Sidepanel.tsx

@@ -115,13 +115,21 @@ function DocSearchSidepanelComp({
   panel: { portalContainer, ...panelProps } = {},
   ...rootProps
 }: DocSearchSidepanelProps): JSX.Element {
-  const { docsearchState, setDocsearchState, keyboardShortcuts, registerView, initialAskAiMessage } = useDocSearch();
+  const {
+    docsearchState,
+    setDocsearchState,
+    keyboardShortcuts,
+    registerView,
+    initialAskAiMessage,
+    clearInitialAskAiMessage,
+  } = useDocSearch();
 
   const toggleSidepanelState = React.useCallback(() => {
     setDocsearchState(docsearchState === 'sidepanel' ? 'ready' : 'sidepanel');
   }, [docsearchState, setDocsearchState]);
 
   const handleClose = (): void => {
+    clearInitialAskAiMessage();
     setDocsearchState('ready');
   };
 

packages/docsearch-react/src/Sidepanel/ConversationScreen.tsx

@@ -80,8 +80,6 @@ export type ConversationScreenProps = {
   handleFeedback?: (messageId: string, thumbs: 0 | 1) => Promise<void>;
   streamError?: Error;
   agentStudio?: boolean;
-  showThreadDepthError?: boolean;
-  onThreadDepthNewConversation?: () => void;
 };
 
 type ConversationnExchangeProps = {
@@ -245,18 +243,9 @@ const ConversationExchange = React.forwardRef<HTMLDivElement, ConversationnExcha
 );
 
 export const ConversationScreen = memo(
-  ({
-    exchanges,
-    translations = {},
-    handleFeedback,
-    showThreadDepthError = false,
-    onThreadDepthNewConversation,
-    ...props
-  }: ConversationScreenProps): JSX.Element => {
+  ({ exchanges, translations = {}, handleFeedback, ...props }: ConversationScreenProps): JSX.Element => {
     const {
       conversationDisclaimer = 'Answers are generated with AI which can make mistakes. Verify responses.',
-      threadDepthExceededMessage = 'This conversation is now closed to keep responses accurate.',
-      startNewConversationButtonText = 'Start a new conversation',
     } = translations;
 
     const mostRecentExchangeRef = React.useRef<HTMLDivElement>(null);
@@ -274,23 +263,6 @@ export const ConversationScreen = memo(
 
     return (
       <div className="DocSearch-Sidepanel-ConversationScreen">
-        {showThreadDepthError && onThreadDepthNewConversation ? (
-          <div className="DocSearch-AskAiScreen-MessageContent DocSearch-AskAiScreen-Error DocSearch-AskAiScreen-Error--ThreadDepth DocSearch-Sidepanel-ConversationScreen-threadDepth">
-            <div className="DocSearch-AskAiScreen-Error-Content">
-              <p>
-                {threadDepthExceededMessage}{' '}
-                <button
-                  type="button"
-                  className="DocSearch-ThreadDepthError-Link"
-                  onClick={onThreadDepthNewConversation}
-                >
-                  {startNewConversationButtonText}
-                </button>{' '}
-                to continue.
-              </p>
-            </div>
-          </div>
-        ) : null}
         <p className="DocSearch-Sidepanel-ConversationScreen-disclaimer">{conversationDisclaimer}</p>
 
         {exchanges.slice().map((exchange, idx) => {

packages/docsearch-react/src/Sidepanel/PromptForm.tsx

@@ -44,13 +44,25 @@ type Props = {
   onStopStreaming: () => void;
   /** When true, the prompt is disabled (same as modal SearchBox in Ask AI mode). */
   isThreadDepthError?: boolean;
+  /**
+   * Rendered above the textarea inside the prompt chrome (e.g. thread-depth AI-217 banner).
+   */
+  threadDepthBanner?: React.ReactNode;
 };
 
 const MAX_PROMPT_ROWS = 8;
 
 export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
   (
-    { exchanges, isStreaming, translations = {}, onSend, onStopStreaming, isThreadDepthError = false },
+    {
+      exchanges,
+      isStreaming,
+      translations = {},
+      onSend,
+      onStopStreaming,
+      isThreadDepthError = false,
+      threadDepthBanner,
+    },
     ref,
   ): JSX.Element => {
     const isMobile = useIsMobile();
@@ -134,6 +146,7 @@ export const PromptForm = React.forwardRef<HTMLTextAreaElement, Props>(
 
     return (
       <div className="DocSearch-Sidepanel-Prompt">
+        {threadDepthBanner}
         <form
           className="DocSearch-Sidepanel-Prompt--form"
           onSubmit={(e) => {