[8710] Expert homepage - add a start over button

frontend/src/components/expert/components/ExpertChatInput.vue

@@ -10,7 +10,7 @@
             <button
                 type="button"
                 class="btn-start-over"
-                :disabled="isWaitingForResponse && !isSessionExpired"
+                :disabled="canStopResponse"
                 @click="handleStartOver"
             >
                 Start over
@@ -69,7 +69,7 @@
 
                 <div class="right">
                     <button
-                        v-if="isWaitingForResponse && !isSessionExpired"
+                        v-if="canStopResponse"
                         type="button"
                         class="btn-stop"
                         @click="handleStop"
@@ -212,6 +212,7 @@ export default {
             'hasMessages',
             'isWaitingForResponse',
             'isInputDisabled',
+            'canStopResponse',
             'pendingInput',
             'composerCommand',
             'questionCadence',

frontend/src/pages/team/Home/Expert/index.vue

@@ -43,22 +43,35 @@
                 <ExpertPanel />
             </div>
 
-            <ff-button
-                v-if="canResume"
-                kind="tertiary"
-                size="small"
-                class="ff-expert-home__resume"
-                data-action="resume-conversation"
-                @click="stage = 'conversing'"
-            >
-                <span v-if="liveTurns > 0">
-                    Continue your conversation
-                    <span class="ff-expert-home__resume-count">
-                        · {{ liveTurns }} {{ liveTurns === 1 ? 'message' : 'messages' }}
+            <div v-if="canResume" class="ff-expert-home__resume">
+                <ff-button
+                    kind="tertiary"
+                    size="small"
+                    data-action="resume-conversation"
+                    @click="stage = 'conversing'"
+                >
+                    <span v-if="liveTurns > 0">
+                        Continue your conversation
+                        <span class="ff-expert-home__resume-count">
+                            · {{ liveTurns }} {{ liveTurns === 1 ? 'message' : 'messages' }}
+                        </span>
                     </span>
-                </span>
-                <span v-else>Open the Expert</span>
-            </ff-button>
+                    <span v-else>Open the Expert</span>
+                </ff-button>
+
+                <span v-if="liveTurns > 0" class="ff-expert-home__resume-divider" aria-hidden="true" />
+
+                <ff-button
+                    v-if="liveTurns > 0"
+                    kind="tertiary"
+                    size="small"
+                    data-action="start-over"
+                    :disabled="expertStore.canStopResponse"
+                    @click="onStartOver"
+                >
+                    Start over
+                </ff-button>
+            </div>
 
             <div class="ff-expert-home__fold">
                 <div class="ff-expert-home__folded">
@@ -162,7 +175,9 @@ const settingsStore = useAccountSettingsStore()
 const expertStore = useProductExpertStore() as ReturnType<typeof useProductExpertStore> & {
     messages: { _type: string }[]
     isInputDisabled: boolean
+    canStopResponse: boolean
     handleQuery: (payload: { query: string }) => Promise<unknown>
+    startOver: () => Promise<void>
 }
 const drawersStore = useUxDrawersStore()
 
@@ -220,6 +235,10 @@ const isComposerDisabled = computed<boolean>(() => expertStore.isInputDisabled)
 
 const canResume = computed<boolean>(() => liveTurns.value > 0 || isComposerDisabled.value)
 
+function onStartOver () {
+    expertStore.startOver().catch(e => e)
+}
+
 const isChatOpen = computed<boolean>(() => stage.value === 'conversing')
 
 provide('expert-chat-open', isChatOpen)
@@ -451,6 +470,9 @@ $ff-wide: 1080px;
 
     &__resume {
         align-self: center;
+        display: flex;
+        align-items: center;
+        gap: 4px;
         flex: 0 0 auto;
         min-height: 0;
         margin-top: 14px;
@@ -465,6 +487,13 @@ $ff-wide: 1080px;
         color: var(--ff-color-text-subtle);
     }
 
+    &__resume-divider {
+        width: 1px;
+        height: 14px;
+        flex: 0 0 auto;
+        background-color: var(--ff-color-border);
+    }
+
     &.is-conversing &__resume {
         max-height: 0;
         padding-top: 0;

frontend/src/stores/product-expert.js

@@ -100,6 +100,9 @@ export const useProductExpertStore = defineStore('product-expert', {
             if (this.isWaitingForResponse) return true
             return this.isInsightsAgent && !this.hasSelectedCapabilities
         },
+        canStopResponse () {
+            return this.isWaitingForResponse && !this.isSessionExpired
+        },
         canImportFlows () {
             const assistantStore = useProductAssistantStore()
             return !!assistantStore.isImmersiveInstance && !!assistantStore.supportedActions['custom:import-flow']

test/unit/frontend/stores/product-expert.spec.js

@@ -182,6 +182,26 @@ describe('product-expert store', () => {
         })
     })
 
+    describe('canStopResponse getter', () => {
+        it('is false while idle', () => {
+            const store = useProductExpertStore()
+            expect(store.canStopResponse).toBe(false)
+        })
+
+        it('is true while a response is in flight', () => {
+            const store = useProductExpertStore()
+            store.setAbortController(new AbortController())
+            expect(store.canStopResponse).toBe(true)
+        })
+
+        it('is false once the session has expired, so Start over stays available', () => {
+            const store = useProductExpertStore()
+            store.setAbortController(new AbortController())
+            store._agentStore.sessionExpiredShown = true
+            expect(store.canStopResponse).toBe(false)
+        })
+    })
+
     describe('messages getters', () => {
         it('hasMessages is false when agent store has no messages', () => {
             const store = useProductExpertStore()