Fix Transcript UI (#51136)

client/cody-shared/src/chat/client.ts

@@ -29,6 +29,7 @@ export interface ClientInit {
 
 export interface Client {
     readonly transcript: Transcript
+    readonly isMessageInProgress: boolean
     submitMessage: (text: string) => Promise<void>
     executeRecipe: (
         recipeId: string,
@@ -129,7 +130,12 @@ export async function createClient({
     }
 
     return {
-        transcript,
+        get transcript() {
+            return transcript
+        },
+        get isMessageInProgress() {
+            return isMessageInProgress
+        },
         submitMessage(text: string) {
             return executeRecipe('chat-question', { humanChatInput: text })
         },

client/cody-ui/src/chat/Transcript.tsx

@@ -81,8 +81,7 @@ export const Transcript: React.FunctionComponent<
         <div ref={transcriptContainerRef} className={classNames(className, styles.container)}>
             {transcript.map(
                 (message, index) =>
-                    message?.displayText &&
-                    (!messageInProgress || index !== transcript.length - 1) && (
+                    message?.displayText && (
                         <TranscriptItem
                             // eslint-disable-next-line react/no-array-index-key
                             key={index}

client/web/src/stores/codyChat.ts

@@ -150,7 +150,17 @@ export const useChatStoreState = create<CodyChatStore>((set, get): CodyChatStore
     }
 
     const setTranscript = async (transcript: Transcript): Promise<void> => {
-        set({ transcript: transcript.toChat() })
+        const { client } = get()
+        if (!client || isErrorLike(client)) {
+            return
+        }
+
+        const messages = transcript.toChat()
+        if (client.isMessageInProgress) {
+            messages.pop()
+        }
+
+        set({ transcript: messages })
 
         if (transcript.isEmpty) {
             return