From cd1ffaec3e7e6de6449b0e9d1ba344ffdb503b91 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 16:48:19 -0500
Subject: [PATCH 01/10] Rename Assistant tab to Chat and move it to first
 position

Remove the sparkle icon CSS and ml-auto positioning that pushed the tab
to the far right. Place it at order 0 so it appears as the first tab,
inline with the rest.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/hooks/use-content-tabs.tsx | 12 +++++-------
 apps/studio/src/index.css                  | 12 ------------
 2 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/apps/studio/src/hooks/use-content-tabs.tsx b/apps/studio/src/hooks/use-content-tabs.tsx
index f197c04812..2d6e3a6e9d 100644
--- a/apps/studio/src/hooks/use-content-tabs.tsx
+++ b/apps/studio/src/hooks/use-content-tabs.tsx
@@ -12,6 +12,11 @@ function useTabs() {
 
 	return useMemo( () => {
 		const tabs: Tab[] = [
+			{
+				order: 0,
+				name: 'assistant',
+				title: __( 'Chat' ),
+			},
 			{
 				order: 1,
 				name: 'overview',
@@ -42,13 +47,6 @@ function useTabs() {
 			}
 		);
 
-		tabs.push( {
-			order: 6,
-			name: 'assistant',
-			title: __( 'Assistant' ),
-			className: 'components-tab-panel__tabs--assistant ltr:pl-8 rtl:pr-8 ltr:ml-auto rtl:mr-auto',
-		} );
-
 		return tabs.sort( ( a, b ) => a.order - b.order );
 	}, [ __ ] );
 }
diff --git a/apps/studio/src/index.css b/apps/studio/src/index.css
index b4d5e8ca62..6e715c9e13 100644
--- a/apps/studio/src/index.css
+++ b/apps/studio/src/index.css
@@ -65,18 +65,6 @@ blockquote {
 	margin-bottom: -1px;
 }
 
-.components-tab-panel__tabs--assistant::before {
-	content: url( 'data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2870_30744)"><path d="M13.7035 6.58213L10.8309 5.59124C9.69491 5.20089 8.79911 4.30509 8.40876 3.16908L7.41787 0.296515C7.28275 -0.0988382 6.71725 -0.0988382 6.58213 0.296515L5.59124 3.16908C5.20089 4.30509 4.30509 5.20089 3.16908 5.59124L0.296515 6.58213C-0.0988382 6.71725 -0.0988382 7.28275 0.296515 7.41787L3.16908 8.40876C4.30509 8.79911 5.20089 9.69491 5.59124 10.8309L6.58213 13.7035C6.71725 14.0988 7.28275 14.0988 7.41787 13.7035L8.40876 10.8309C8.79911 9.69491 9.69491 8.79911 10.8309 8.40876L13.7035 7.41787C14.0988 7.28275 14.0988 6.71725 13.7035 6.58213ZM10.3505 7.21269L8.91421 7.70813C8.3437 7.90331 7.8983 8.35371 7.70313 8.91921L7.20768 10.3555C7.13762 10.5557 6.85737 10.5557 6.79231 10.3555L6.29687 8.91921C6.1017 8.3487 5.6513 7.90331 5.08579 7.70813L3.64951 7.21269C3.44933 7.14263 3.44933 6.86238 3.64951 6.79232L5.08579 6.29687C5.6563 6.1017 6.1017 5.6513 6.29687 5.08579L6.79231 3.64951C6.86238 3.44933 7.14263 3.44933 7.20768 3.64951L7.70313 5.08579C7.8983 5.6563 8.3487 6.1017 8.91421 6.29687L10.3505 6.79232C10.5507 6.86238 10.5507 7.14263 10.3505 7.21269Z" fill="black"/></g><defs><clip-path id="clip0_2870_30744"><rect width="14" height="14" fill="white"/></clip-path></defs></svg>' );
-	display: inline-block;
-	width: 14px;
-	height: 14px;
-	top: 16px;
-}
-
-.components-tab-panel__tabs--assistant:hover:not( :active )::before {
-	content: url( 'data:image/svg+xml;utf8,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2870_30744)"><path d="M13.7035 6.58213L10.8309 5.59124C9.69491 5.20089 8.79911 4.30509 8.40876 3.16908L7.41787 0.296515C7.28275 -0.0988382 6.71725 -0.0988382 6.58213 0.296515L5.59124 3.16908C5.20089 4.30509 4.30509 5.20089 3.16908 5.59124L0.296515 6.58213C-0.0988382 6.71725 -0.0988382 7.28275 0.296515 7.41787L3.16908 8.40876C4.30509 8.79911 5.20089 9.69491 5.59124 10.8309L6.58213 13.7035C6.71725 14.0988 7.28275 14.0988 7.41787 13.7035L8.40876 10.8309C8.79911 9.69491 9.69491 8.79911 10.8309 8.40876L13.7035 7.41787C14.0988 7.28275 14.0988 6.71725 13.7035 6.58213ZM10.3505 7.21269L8.91421 7.70813C8.3437 7.90331 7.8983 8.35371 7.70313 8.91921L7.20768 10.3555C7.13762 10.5557 6.85737 10.5557 6.79231 10.3555L6.29687 8.91921C6.1017 8.3487 5.6513 7.90331 5.08579 7.70813L3.64951 7.21269C3.44933 7.14263 3.44933 6.86238 3.64951 6.79232L5.08579 6.29687C5.6563 6.1017 6.1017 5.6513 6.29687 5.08579L6.79231 3.64951C6.86238 3.44933 7.14263 3.44933 7.20768 3.64951L7.70313 5.08579C7.8983 5.6563 8.3487 6.1017 8.91421 6.29687L10.3505 6.79232C10.5507 6.86238 10.5507 7.14263 10.3505 7.21269Z" fill="%233858E9"/></g><defs><clip-path id="clip0_2870_30744"><rect width="14" height="14" fill="white"/></clip-path></defs></svg>' );
-}
-
 .components-tab-panel__tabs-item.is-active::after {
 	background: theme( 'colors.black' );
 }

From d2a716591cbbb84cd0ace2957ff9b5bf27f624bd Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 16:48:25 -0500
Subject: [PATCH 02/10] Remove animated Rive icon from chat input and fix
 padding

Strip the useAiIcon hook, its typing/keyUp state machinery, and the
Rive component from the input. Bump horizontal padding from px-1 to
px-4 to fill the space left by the removed icon.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/ai-input.tsx | 35 +------------------------
 1 file changed, 1 insertion(+), 34 deletions(-)

diff --git a/apps/studio/src/components/ai-input.tsx b/apps/studio/src/components/ai-input.tsx
index f9ccd05a00..3bdd9d4edf 100644
--- a/apps/studio/src/components/ai-input.tsx
+++ b/apps/studio/src/components/ai-input.tsx
@@ -4,7 +4,6 @@ import { Icon, moreVertical, keyboardReturn, reset } from '@wordpress/icons';
 import React, { forwardRef, useRef, useEffect, useState } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
 import { TELEX_HOSTNAME, TELEX_UTM_PARAMS } from 'src/constants';
-import useAiIcon from 'src/hooks/use-ai-icon';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { addUrlParams } from 'src/lib/url-utils';
@@ -57,34 +56,17 @@ const UnforwardedAIInput = (
 	}: AIInputProps,
 	inputRef: React.RefObject< HTMLTextAreaElement > | React.RefCallback< HTMLTextAreaElement > | null
 ) => {
-	const [ isTyping, setIsTyping ] = useState( false );
 	const [ thinkingDuration, setThinkingDuration ] = useState<
 		'short' | 'medium' | 'long' | 'veryLong'
 	>( 'short' );
-	const typingTimeout = useRef< NodeJS.Timeout >();
 	const thinkingTimeout = useRef< NodeJS.Timeout[] >( [] );
 
-	const { RiveComponent } = useAiIcon( {
-		inactive: disabled,
-		thinking: isAssistantThinking,
-		typing: isTyping,
-	} );
-
 	useEffect( () => {
 		if ( ! disabled && inputRef && 'current' in inputRef && inputRef.current ) {
 			inputRef.current?.focus();
 		}
 	}, [ disabled, inputRef ] );
 
-	useEffect(
-		() => () => {
-			if ( typingTimeout.current ) {
-				clearTimeout( typingTimeout.current );
-			}
-		},
-		[]
-	);
-
 	const handleInput = ( e: React.ChangeEvent< HTMLTextAreaElement > ) => {
 		setInput( e.target.value );
 
@@ -126,21 +108,10 @@ const UnforwardedAIInput = (
 			// Allow Shift + Enter to create a new line
 			return;
 		} else {
-			setIsTyping( true );
 			handleKeyDown( e );
 		}
 	};
 
-	const handleKeyUpWrapper = () => {
-		if ( typingTimeout.current ) {
-			clearTimeout( typingTimeout.current );
-		}
-
-		typingTimeout.current = setTimeout( () => {
-			setIsTyping( false );
-		}, 400 );
-	};
-
 	useEffect( () => {
 		function clearThinkingTimeouts() {
 			thinkingTimeout.current.forEach( clearTimeout );
@@ -223,22 +194,18 @@ const UnforwardedAIInput = (
 				}`
 			) }
 		>
-			<div className={ `flex items-center h-12 ${ disabled && 'opacity-20 grayscale' }` }>
-				<RiveComponent aria-hidden="true" style={ { width: 48, height: 48 } } />
-			</div>
 			<textarea
 				ref={ inputRef }
 				disabled={ disabled }
 				placeholder={ getPlaceholderText() }
 				className={ cx(
-					`w-full px-1 py-3.5 rounded-sm border-none bg-transparent resize-none focus:outline-none assistant-textarea ${
+					`w-full px-4 py-3.5 rounded-sm border-none bg-transparent resize-none focus:outline-none assistant-textarea ${
 						disabled ? 'cursor-not-allowed opacity-30' : ''
 					}`
 				) }
 				value={ input }
 				onChange={ handleInput }
 				onKeyDown={ handleKeyDownWrapper }
-				onKeyUp={ handleKeyUpWrapper }
 				rows={ 1 }
 				data-testid="ai-input-textarea"
 			/>

From 05871718c25623fa0219ce4f326adb91fdcbcd17 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 16:48:51 -0500
Subject: [PATCH 03/10] Remove background and border from chat messages

Strip the rounded border, bg-white, and bg-white/45 from normal
messages for a cleaner look. Padding stays the same. Failed message
styling (red border/background) is preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/chat-message.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/studio/src/components/chat-message.tsx b/apps/studio/src/components/chat-message.tsx
index e88e26b7aa..08e849a104 100644
--- a/apps/studio/src/components/chat-message.tsx
+++ b/apps/studio/src/components/chat-message.tsx
@@ -70,14 +70,9 @@ export const ChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >(
 						data-testid="chat-message"
 						aria-labelledby={ id }
 						className={ cx(
-							'inline-block p-3 rounded border overflow-x-auto overflow-y-hidden select-text',
+							'inline-block p-3 overflow-x-auto overflow-y-hidden select-text',
 							isUnauthenticated ? 'lg:max-w-[90%]' : 'lg:max-w-[70%]',
-							message.failedMessage
-								? 'border-[#FACFD2] bg-[#F7EBEC]'
-								: message.role === 'user'
-								? 'bg-white'
-								: 'bg-white/45',
-							! message.failedMessage && 'border-gray-300'
+							message.failedMessage && 'rounded border border-[#FACFD2] bg-[#F7EBEC]'
 						) }
 					>
 						<div className="relative">

From da692884831735a4a65589297b3747a5bfde1a27 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 16:51:05 -0500
Subject: [PATCH 04/10] Remove background and border from welcome messages

Match the simplified styling from chat messages. Loading skeleton keeps
its bg-gray-100 and rounded for the pulse placeholder effect.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/welcome-message-prompt.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/studio/src/components/welcome-message-prompt.tsx b/apps/studio/src/components/welcome-message-prompt.tsx
index 9404e2ec10..3e3623fbe8 100644
--- a/apps/studio/src/components/welcome-message-prompt.tsx
+++ b/apps/studio/src/components/welcome-message-prompt.tsx
@@ -35,7 +35,7 @@ export const WelcomeMessagePrompt = React.forwardRef< HTMLDivElement, WelcomeMes
 				role="group"
 				aria-labelledby={ id }
 				className={ cx(
-					'inline-block p-3 rounded border border-gray-300 lg:max-w-[70%] select-text bg-white',
+					'inline-block p-3 lg:max-w-[70%] select-text',
 					className
 				) }
 			>
@@ -95,10 +95,10 @@ const WelcomeComponent = React.forwardRef< HTMLDivElement, WelcomeComponentProps
 			return (
 				<div ref={ ref } className="flex flex-col animate-pulse">
 					<div className="flex mt-2">
-						<div className="inline-block p-3 rounded border border-gray-300 lg:max-w-[70%] bg-gray-100 h-16 w-96" />
+						<div className="inline-block p-3 lg:max-w-[70%] bg-gray-100 rounded h-16 w-96" />
 					</div>
 					<div className="flex mt-2">
-						<div className="inline-block p-3 rounded border border-gray-300 lg:max-w-[70%] bg-gray-100 h-12 w-72" />
+						<div className="inline-block p-3 lg:max-w-[70%] bg-gray-100 rounded h-12 w-72" />
 					</div>
 				</div>
 			);

From 84e0f204ed56e83e31ab1ddd5140a84f2d4e9d34 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 16:58:30 -0500
Subject: [PATCH 05/10] Simplify chat message styling and update welcome copy

- Remove border and background from welcome messages to match chat
- Add subtle background (a8c-gray-100) and rounded-xl to user messages
- Override API welcome messages with Kit introduction copy

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/chat-message.tsx          | 4 +++-
 apps/studio/src/components/content-tab-assistant.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/studio/src/components/chat-message.tsx b/apps/studio/src/components/chat-message.tsx
index 08e849a104..6bc2c36f7a 100644
--- a/apps/studio/src/components/chat-message.tsx
+++ b/apps/studio/src/components/chat-message.tsx
@@ -72,7 +72,9 @@ export const ChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >(
 						className={ cx(
 							'inline-block p-3 overflow-x-auto overflow-y-hidden select-text',
 							isUnauthenticated ? 'lg:max-w-[90%]' : 'lg:max-w-[70%]',
-							message.failedMessage && 'rounded border border-[#FACFD2] bg-[#F7EBEC]'
+							message.failedMessage
+								? 'rounded border border-[#FACFD2] bg-[#F7EBEC]'
+								: message.role === 'user' && 'rounded-xl bg-a8c-gray-100'
 						) }
 					>
 						<div className="relative">
diff --git a/apps/studio/src/components/content-tab-assistant.tsx b/apps/studio/src/components/content-tab-assistant.tsx
index e2dcb75877..9bbf344bda 100644
--- a/apps/studio/src/components/content-tab-assistant.tsx
+++ b/apps/studio/src/components/content-tab-assistant.tsx
@@ -504,7 +504,13 @@ export function ContentTabAssistant( { selectedSite }: ContentTabAssistantProps
 									inputRef.current?.focus();
 								} }
 								showExamplePrompts={ messages.length === 0 }
-								messages={ data?.messages ?? [] }
+								messages={ [
+									__( "Hi! I'm Kit, your AI assistant." ),
+									__(
+										"I can design and build just about anything. I can make stores, blogs, portfolios, apps, you name it. Just describe what you want and I'll make it happen."
+									),
+									__( 'So, what are we making?' ),
+								] }
 								examplePrompts={ data?.example_prompts ?? [] }
 								disabled={ disabled }
 								isLoading={ isLoading }

From 2dc98849d0793b6f0d8727439d368e9588390227 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 17:06:12 -0500
Subject: [PATCH 06/10] Redesign chat rating buttons

- Default color matches surrounding text (a8c-gray-70), colored on hover
- Remove 'Was this helpful?' label, use tooltips instead
- Rename Yes/No to Helpful/Unhelpful
- Left-align buttons with message text, tighten spacing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/chat-rating.tsx          | 13 ++++++-------
 .../studio/src/components/content-tab-assistant.tsx |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/studio/src/components/chat-rating.tsx b/apps/studio/src/components/chat-rating.tsx
index c4d990a7f3..b4474d426b 100644
--- a/apps/studio/src/components/chat-rating.tsx
+++ b/apps/studio/src/components/chat-rating.tsx
@@ -36,24 +36,23 @@ export const ChatRating = ( { messageApiId, feedbackReceived, instanceId }: Chat
 	return feedbackReceived ? (
 		<FeedbackThanks />
 	) : (
-		<div className="flex flex-col mt-4 items-start gap-3">
-			<div className="flex items-center gap-3">
-				<span className="text-a8c-gray-70 text-xs">{ __( 'Was this helpful?' ) }</span>
+		<div className="flex mt-2">
+			<div className="flex items-center gap-1">
 				<Button
 					variant="icon"
-					className="text-a8c-green-50 hover:!text-a8c-green-50 flex items-center gap-1"
+					className="text-a8c-gray-70 hover:!text-a8c-green-50"
 					onClick={ () => handleRatingClick( 1 ) }
+					tooltipText={ __( 'Helpful' ) }
 				>
 					<Icon size={ 18 } icon={ thumbsUp } />
-					<span className="text-xs">{ __( 'Yes' ) }</span>
 				</Button>
 				<Button
 					variant="icon"
-					className="text-a8c-red-50 hover:!text-a8c-red-50 flex items-center gap-1"
+					className="text-a8c-gray-70 hover:!text-a8c-red-50"
 					onClick={ () => handleRatingClick( 0 ) }
+					tooltipText={ __( 'Unhelpful' ) }
 				>
 					<Icon size={ 18 } icon={ thumbsDown } />
-					<span className="text-xs">{ __( 'No' ) }</span>
 				</Button>
 			</div>
 		</div>
diff --git a/apps/studio/src/components/content-tab-assistant.tsx b/apps/studio/src/components/content-tab-assistant.tsx
index 9bbf344bda..cc7a709de3 100644
--- a/apps/studio/src/components/content-tab-assistant.tsx
+++ b/apps/studio/src/components/content-tab-assistant.tsx
@@ -305,7 +305,7 @@ const AuthenticatedView = memo(
 						showThinking={ showThinking }
 						siteId={ siteId }
 					>
-						<div className="flex justify-end">
+						<div className="flex">
 							{ !! lastMessage.messageApiId && (
 								<ChatRating
 									instanceId={ instanceId }

From ba346927d93468ff72f242468a04d15f4159a195 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 18:49:32 -0500
Subject: [PATCH 07/10] Add copy button to chat messages and update disclaimer
 text

- Copy button on all messages, visible on hover
- Copy button on last assistant message (via LastMessage)
- Replace 'Powered by experimental AI' with concise disclaimer
- Center and shrink disclaimer text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/chat-message.tsx       | 11 ++++++++++-
 .../src/components/content-tab-assistant.tsx      | 15 +++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/studio/src/components/chat-message.tsx b/apps/studio/src/components/chat-message.tsx
index 6bc2c36f7a..88b31e5128 100644
--- a/apps/studio/src/components/chat-message.tsx
+++ b/apps/studio/src/components/chat-message.tsx
@@ -6,6 +6,7 @@ import remarkGfm from 'remark-gfm';
 import Anchor from 'src/components/assistant-anchor';
 import createCodeComponent from 'src/components/assistant-code-block';
 import { FeedbackThanks } from 'src/components/chat-rating';
+import { CopyTextButton } from 'src/components/copy-text-button';
 import { cx } from 'src/lib/cx';
 import { Message } from 'src/stores/chat-slice';
 
@@ -70,7 +71,7 @@ export const ChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >(
 						data-testid="chat-message"
 						aria-labelledby={ id }
 						className={ cx(
-							'inline-block p-3 overflow-x-auto overflow-y-hidden select-text',
+							'group inline-block p-3 overflow-x-auto overflow-y-hidden select-text',
 							isUnauthenticated ? 'lg:max-w-[90%]' : 'lg:max-w-[70%]',
 							message.failedMessage
 								? 'rounded border border-[#FACFD2] bg-[#F7EBEC]'
@@ -90,6 +91,14 @@ export const ChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >(
 									instanceId={ instanceId }
 									content={ children }
 								/>
+								<div className="flex mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+									<CopyTextButton
+										text={ children }
+										variant="icon"
+										className="text-a8c-gray-70 hover:!text-a8c-blue-50"
+										iconSize={ 18 }
+									/>
+								</div>
 								{ message.feedbackReceived && <FeedbackThanks /> }
 							</>
 						) : (
diff --git a/apps/studio/src/components/content-tab-assistant.tsx b/apps/studio/src/components/content-tab-assistant.tsx
index cc7a709de3..59bb1b7172 100644
--- a/apps/studio/src/components/content-tab-assistant.tsx
+++ b/apps/studio/src/components/content-tab-assistant.tsx
@@ -13,6 +13,7 @@ import { ArrowIcon } from 'src/components/arrow-icon';
 import { MessageThinking } from 'src/components/assistant-thinking';
 import Button from 'src/components/button';
 import { ChatMessage, MarkDownWithCode } from 'src/components/chat-message';
+import { CopyTextButton } from 'src/components/copy-text-button';
 import { ChatRating } from 'src/components/chat-rating';
 import { LearnMoreLink } from 'src/components/learn-more';
 import offlineIcon from 'src/components/offline-icon';
@@ -183,6 +184,14 @@ const LastMessage = forwardRef<
 							instanceId={ instanceId }
 							content={ message.content }
 						/>
+						<div className="flex mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+							<CopyTextButton
+								text={ message.content }
+								variant="icon"
+								className="text-a8c-gray-70 hover:!text-a8c-blue-50"
+								iconSize={ 18 }
+							/>
+						</div>
 						{ children }
 					</motion.div>
 				) }
@@ -552,10 +561,8 @@ export function ContentTabAssistant( { selectedSite }: ContentTabAssistantProps
 						clearConversation={ clearConversation }
 						isAssistantThinking={ isAssistantThinking }
 					/>
-					<div data-testid="guidelines-link" className="text-a8c-gray-50 self-end py-2">
-						{ createInterpolateElement( __( 'Powered by experimental AI. <learn_more_link />' ), {
-							learn_more_link: <LearnMoreLink docsLinksKey="a8cAiGuidelines" />,
-						} ) }
+					<div data-testid="guidelines-link" className="text-a8c-gray-50 text-xs text-center py-2">
+						{ __( 'AI can make mistakes. Double-check responses.' ) }
 					</div>
 				</div>
 			</div>

From 16fc4b8a85ebc60c5e4e04edb5a45c4733970c5a Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 18:53:16 -0500
Subject: [PATCH 08/10] Unify message actions and add toggle ratings to all AI
 messages

- Create MessageActions bar (copy + ratings) shown on hover for all msgs
- ChatRating is now a toggle: click selects, click again deselects
- All assistant messages show ratings, not just the last one
- Remove FeedbackThanks replacement text
- Pass onRate callback from ContentTabAssistant through AuthenticatedView

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/chat-message.tsx   | 61 +++++++++++-------
 apps/studio/src/components/chat-rating.tsx    | 62 +++++++++----------
 .../src/components/content-tab-assistant.tsx  | 58 +++++++++--------
 3 files changed, 101 insertions(+), 80 deletions(-)

diff --git a/apps/studio/src/components/chat-message.tsx b/apps/studio/src/components/chat-message.tsx
index 88b31e5128..9cbd0fe504 100644
--- a/apps/studio/src/components/chat-message.tsx
+++ b/apps/studio/src/components/chat-message.tsx
@@ -5,7 +5,7 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import Anchor from 'src/components/assistant-anchor';
 import createCodeComponent from 'src/components/assistant-code-block';
-import { FeedbackThanks } from 'src/components/chat-rating';
+import { ChatRating } from 'src/components/chat-rating';
 import { CopyTextButton } from 'src/components/copy-text-button';
 import { cx } from 'src/lib/cx';
 import { Message } from 'src/stores/chat-slice';
@@ -18,8 +18,8 @@ export interface ChatMessageProps {
 	message: Message;
 	isUnauthenticated?: boolean;
 	failedMessage?: boolean;
-	feedbackReceived?: boolean;
 	instanceId: string;
+	onRate?: ( ratingValue: number ) => void;
 }
 
 export const MarkDownWithCode = ( {
@@ -51,8 +51,31 @@ export const MarkDownWithCode = ( {
 		</Markdown>
 	</div>
 );
+
+const MessageActions = ( {
+	content,
+	isAssistant,
+	onRate,
+}: {
+	content: string;
+	isAssistant: boolean;
+	onRate?: ( ratingValue: number ) => void;
+} ) => (
+	<div className="flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+		<CopyTextButton
+			text={ content }
+			variant="icon"
+			className="text-a8c-gray-70 hover:!text-a8c-blue-50"
+			iconSize={ 18 }
+		/>
+		{ isAssistant && <ChatRating onRate={ onRate } /> }
+	</div>
+);
+
 export const ChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >(
-	( { id, message, className, siteId, children, isUnauthenticated, instanceId }, ref ) => {
+	( { id, message, className, siteId, children, isUnauthenticated, instanceId, onRate }, ref ) => {
+		const isString = typeof children === 'string';
+
 		return (
 			<>
 				<div ref={ ref } className="h-4" />
@@ -83,27 +106,23 @@ export const ChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >(
 								{ message.role === 'user' ? __( 'Your message' ) : __( 'Studio Assistant' ) },
 							</span>
 						</div>
-						{ typeof children === 'string' ? (
-							<>
-								<MarkDownWithCode
-									message={ message }
-									siteId={ siteId }
-									instanceId={ instanceId }
-									content={ children }
-								/>
-								<div className="flex mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
-									<CopyTextButton
-										text={ children }
-										variant="icon"
-										className="text-a8c-gray-70 hover:!text-a8c-blue-50"
-										iconSize={ 18 }
-									/>
-								</div>
-								{ message.feedbackReceived && <FeedbackThanks /> }
-							</>
+						{ isString ? (
+							<MarkDownWithCode
+								message={ message }
+								siteId={ siteId }
+								instanceId={ instanceId }
+								content={ children }
+							/>
 						) : (
 							children
 						) }
+						{ message.content && (
+							<MessageActions
+								content={ message.content }
+								isAssistant={ message.role === 'assistant' }
+								onRate={ onRate }
+							/>
+						) }
 					</div>
 				</div>
 			</>
diff --git a/apps/studio/src/components/chat-rating.tsx b/apps/studio/src/components/chat-rating.tsx
index b4474d426b..147f4cd1d1 100644
--- a/apps/studio/src/components/chat-rating.tsx
+++ b/apps/studio/src/components/chat-rating.tsx
@@ -1,60 +1,56 @@
 import { __ } from '@wordpress/i18n';
 import { thumbsUp, thumbsDown, Icon } from '@wordpress/icons';
+import { useState } from 'react';
 import Button from 'src/components/button';
-import { useAuth } from 'src/hooks/use-auth';
-import { useAppDispatch } from 'src/stores';
-import { chatThunks } from 'src/stores/chat-slice';
+import { cx } from 'src/lib/cx';
 
 interface ChatRatingProps {
-	instanceId: string;
-	messageApiId: number;
-	feedbackReceived: boolean;
+	onRate?: ( ratingValue: number ) => void;
 	className?: string;
 }
 
-export const FeedbackThanks = () => {
-	return (
-		<div className="text-a8c-gray-70 italic text-xs flex justify-end mt-4">
-			{ __( 'Thanks for the feedback!' ) }
-		</div>
-	);
-};
+export const ChatRating = ( { onRate, className }: ChatRatingProps ) => {
+	const [ selectedRating, setSelectedRating ] = useState< number | null >( null );
 
-export const ChatRating = ( { messageApiId, feedbackReceived, instanceId }: ChatRatingProps ) => {
-	const { client } = useAuth();
-	const dispatch = useAppDispatch();
-	const handleRatingClick = async ( feedback: number ) => {
-		if ( ! client ) {
-			return;
+	const handleClick = ( value: number ) => {
+		if ( selectedRating === value ) {
+			setSelectedRating( null );
+		} else {
+			setSelectedRating( value );
+			onRate?.( value );
 		}
-
-		void dispatch(
-			chatThunks.sendFeedback( { client, messageApiId, ratingValue: feedback, instanceId } )
-		);
 	};
 
-	return feedbackReceived ? (
-		<FeedbackThanks />
-	) : (
-		<div className="flex mt-2">
-			<div className="flex items-center gap-1">
+	return (
+		<div className={ cx( 'flex items-center gap-1', className ) }>
+			{ ( selectedRating === null || selectedRating === 1 ) && (
 				<Button
 					variant="icon"
-					className="text-a8c-gray-70 hover:!text-a8c-green-50"
-					onClick={ () => handleRatingClick( 1 ) }
+					className={ cx(
+						selectedRating === 1
+							? 'text-a8c-green-50'
+							: 'text-a8c-gray-70 hover:!text-a8c-green-50'
+					) }
+					onClick={ () => handleClick( 1 ) }
 					tooltipText={ __( 'Helpful' ) }
 				>
 					<Icon size={ 18 } icon={ thumbsUp } />
 				</Button>
+			) }
+			{ ( selectedRating === null || selectedRating === 0 ) && (
 				<Button
 					variant="icon"
-					className="text-a8c-gray-70 hover:!text-a8c-red-50"
-					onClick={ () => handleRatingClick( 0 ) }
+					className={ cx(
+						selectedRating === 0
+							? 'text-a8c-red-50'
+							: 'text-a8c-gray-70 hover:!text-a8c-red-50'
+					) }
+					onClick={ () => handleClick( 0 ) }
 					tooltipText={ __( 'Unhelpful' ) }
 				>
 					<Icon size={ 18 } icon={ thumbsDown } />
 				</Button>
-			</div>
+			) }
 		</div>
 	);
 };
diff --git a/apps/studio/src/components/content-tab-assistant.tsx b/apps/studio/src/components/content-tab-assistant.tsx
index 59bb1b7172..9e96ec08f5 100644
--- a/apps/studio/src/components/content-tab-assistant.tsx
+++ b/apps/studio/src/components/content-tab-assistant.tsx
@@ -13,8 +13,6 @@ import { ArrowIcon } from 'src/components/arrow-icon';
 import { MessageThinking } from 'src/components/assistant-thinking';
 import Button from 'src/components/button';
 import { ChatMessage, MarkDownWithCode } from 'src/components/chat-message';
-import { CopyTextButton } from 'src/components/copy-text-button';
-import { ChatRating } from 'src/components/chat-rating';
 import { LearnMoreLink } from 'src/components/learn-more';
 import offlineIcon from 'src/components/offline-icon';
 import WelcomeComponent from 'src/components/welcome-message-prompt';
@@ -125,13 +123,14 @@ const OfflineModeView = () => {
 
 const LastMessage = forwardRef<
 	HTMLDivElement,
-	React.PropsWithChildren< {
+	{
 		instanceId: string;
 		message: MessageType;
 		showThinking: boolean;
 		siteId: string;
-	} >
->( ( { children, instanceId, message, showThinking, siteId }, ref ) => {
+		onRate?: ( ratingValue: number ) => void;
+	}
+>( ( { instanceId, message, showThinking, siteId, onRate }, ref ) => {
 	const [ isInitialRender, setIsInitialRender ] = useState( true );
 
 	useEffect( () => {
@@ -157,6 +156,7 @@ const LastMessage = forwardRef<
 			message={ message }
 			siteId={ siteId }
 			instanceId={ instanceId }
+			onRate={ onRate }
 		>
 			<AnimatePresence mode="wait">
 				{ showThinking ? (
@@ -184,15 +184,6 @@ const LastMessage = forwardRef<
 							instanceId={ instanceId }
 							content={ message.content }
 						/>
-						<div className="flex mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
-							<CopyTextButton
-								text={ message.content }
-								variant="icon"
-								className="text-a8c-gray-70 hover:!text-a8c-blue-50"
-								iconSize={ 18 }
-							/>
-						</div>
-						{ children }
 					</motion.div>
 				) }
 			</AnimatePresence>
@@ -207,6 +198,7 @@ interface AuthenticatedViewProps {
 	siteId: string;
 	submitPrompt: ( messageToSend: string, isRetry?: boolean ) => void;
 	wrapperRef: React.RefObject< HTMLDivElement >;
+	onRate: ( messageApiId: number, ratingValue: number ) => void;
 }
 
 const AuthenticatedView = memo(
@@ -217,6 +209,7 @@ const AuthenticatedView = memo(
 		siteId,
 		submitPrompt,
 		wrapperRef,
+		onRate,
 	}: AuthenticatedViewProps ) => {
 		const lastMessageRef = useRef< HTMLDivElement >( null );
 		const [ showThinking, setShowThinking ] = useState( isAssistantThinking );
@@ -287,6 +280,11 @@ const AuthenticatedView = memo(
 						message={ message }
 						siteId={ siteId }
 						instanceId={ instanceId }
+						onRate={
+							message.messageApiId
+								? ( ratingValue ) => onRate( message.messageApiId!, ratingValue )
+								: undefined
+						}
 					>
 						{ message.content }
 					</ChatMessage>
@@ -295,7 +293,7 @@ const AuthenticatedView = memo(
 					) }
 				</>
 			),
-			[ submitPrompt, siteId, instanceId ]
+			[ submitPrompt, siteId, instanceId, onRate ]
 		);
 
 		if ( messages.length === 0 ) {
@@ -313,17 +311,12 @@ const AuthenticatedView = memo(
 						ref={ lastMessageRef }
 						showThinking={ showThinking }
 						siteId={ siteId }
-					>
-						<div className="flex">
-							{ !! lastMessage.messageApiId && (
-								<ChatRating
-									instanceId={ instanceId }
-									messageApiId={ lastMessage.messageApiId }
-									feedbackReceived={ !! lastMessage.feedbackReceived }
-								/>
-							) }
-						</div>
-					</LastMessage>
+						onRate={
+							lastMessage.messageApiId
+								? ( ratingValue ) => onRate( lastMessage.messageApiId!, ratingValue )
+								: undefined
+						}
+					/>
 				) }
 			</>
 		);
@@ -430,6 +423,18 @@ export function ContentTabAssistant( { selectedSite }: ContentTabAssistantProps
 		[ client, dispatch, instanceId, selectedSite.id, messages, chatApiId ]
 	);
 
+	const handleRate = useCallback(
+		( messageApiId: number, ratingValue: number ) => {
+			if ( ! client ) {
+				return;
+			}
+			void dispatch(
+				chatThunks.sendFeedback( { client, messageApiId, ratingValue, instanceId } )
+			);
+		},
+		[ client, dispatch, instanceId ]
+	);
+
 	const clearConversation = () => {
 		dispatch( chatActions.setChatInput( { siteId: selectedSite.id, input: '' } ) );
 		dispatch( chatActions.setMessages( { instanceId, messages: [] } ) );
@@ -532,6 +537,7 @@ export function ContentTabAssistant( { selectedSite }: ContentTabAssistantProps
 								siteId={ selectedSite.id }
 								submitPrompt={ submitPrompt }
 								wrapperRef={ wrapperRef }
+								onRate={ handleRate }
 							/>
 						</>
 					) : (

From 0253976bd6b520580d1f4d238ac666cd47d3c294 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 19:25:12 -0500
Subject: [PATCH 09/10] Polish message actions layout and rating animations

- Restructure ChatMessage to wrap bubble + actions in inline-flex column
  so actions align to bubble width on both user and AI messages
- Actions always left-aligned with pl-3 matching message padding
- Remove bottom padding on AI messages (actions provide spacing)
- Animated rating toggle with max-width transitions and filled icons
- Fix rating button height alignment (flex wrapper vs block div)
- Replace CopyTextButton with inline CopyButton for consistent sizing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/chat-message.tsx | 104 +++++++++++++-------
 apps/studio/src/components/chat-rating.tsx  |  37 +++++--
 2 files changed, 96 insertions(+), 45 deletions(-)

diff --git a/apps/studio/src/components/chat-message.tsx b/apps/studio/src/components/chat-message.tsx
index 9cbd0fe504..1db5badcf8 100644
--- a/apps/studio/src/components/chat-message.tsx
+++ b/apps/studio/src/components/chat-message.tsx
@@ -5,9 +5,12 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import Anchor from 'src/components/assistant-anchor';
 import createCodeComponent from 'src/components/assistant-code-block';
+import { copy, Icon } from '@wordpress/icons';
+import { useCallback, useState } from 'react';
+import Button from 'src/components/button';
 import { ChatRating } from 'src/components/chat-rating';
-import { CopyTextButton } from 'src/components/copy-text-button';
 import { cx } from 'src/lib/cx';
+import { getIpcApi } from 'src/lib/get-ipc-api';
 import { Message } from 'src/stores/chat-slice';
 
 export interface ChatMessageProps {
@@ -52,6 +55,29 @@ export const MarkDownWithCode = ( {
 	</div>
 );
 
+const CopyButton = ( { text }: { text: string } ) => {
+	const [ showCopied, setShowCopied ] = useState( false );
+	const onClick = useCallback( () => {
+		void getIpcApi().copyText( text );
+		setShowCopied( true );
+		setTimeout( () => setShowCopied( false ), 2000 );
+	}, [ text ] );
+
+	return (
+		<Button
+			variant="icon"
+			className={ cx(
+				'text-a8c-gray-70 hover:!text-a8c-blue-50',
+				showCopied && '!text-a8c-blue-50'
+			) }
+			onClick={ onClick }
+			tooltipText={ __( 'Copy to clipboard' ) }
+		>
+			<Icon size={ 18 } icon={ copy } />
+		</Button>
+	);
+};
+
 const MessageActions = ( {
 	content,
 	isAssistant,
@@ -61,13 +87,8 @@ const MessageActions = ( {
 	isAssistant: boolean;
 	onRate?: ( ratingValue: number ) => void;
 } ) => (
-	<div className="flex items-center gap-1 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
-		<CopyTextButton
-			text={ content }
-			variant="icon"
-			className="text-a8c-gray-70 hover:!text-a8c-blue-50"
-			iconSize={ 18 }
-		/>
+	<div className="flex items-center gap-1 mt-2 pl-3 opacity-0 group-hover:opacity-100 transition-opacity">
+		<CopyButton text={ content } />
 		{ isAssistant && <ChatRating onRate={ onRate } /> }
 	</div>
 );
@@ -76,50 +97,57 @@ export const ChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >(
 	( { id, message, className, siteId, children, isUnauthenticated, instanceId, onRate }, ref ) => {
 		const isString = typeof children === 'string';
 
+		const isUser = message.role === 'user';
+
 		return (
 			<>
 				<div ref={ ref } className="h-4" />
 				<div
 					className={ cx(
-						'flex',
-						isUnauthenticated || message.role !== 'user'
+						'group flex',
+						isUnauthenticated || ! isUser
 							? 'justify-start ltr:md:mr-24 rtl:md:ml-24'
 							: 'justify-end ltr:md:ml-24 rtl:md:mr-24',
 						className
 					) }
 				>
-					<div
-						id={ id }
-						role="group"
-						data-testid="chat-message"
-						aria-labelledby={ id }
-						className={ cx(
-							'group inline-block p-3 overflow-x-auto overflow-y-hidden select-text',
-							isUnauthenticated ? 'lg:max-w-[90%]' : 'lg:max-w-[70%]',
-							message.failedMessage
-								? 'rounded border border-[#FACFD2] bg-[#F7EBEC]'
-								: message.role === 'user' && 'rounded-xl bg-a8c-gray-100'
-						) }
-					>
-						<div className="relative">
-							<span className="sr-only">
-								{ message.role === 'user' ? __( 'Your message' ) : __( 'Studio Assistant' ) },
-							</span>
+					<div className={ cx(
+						'inline-flex flex-col',
+						isUnauthenticated ? 'lg:max-w-[90%]' : 'lg:max-w-[70%]',
+					) }>
+						<div
+							id={ id }
+							role="group"
+							data-testid="chat-message"
+							aria-labelledby={ id }
+							className={ cx(
+								'p-3 overflow-x-auto overflow-y-hidden select-text',
+								! isUser && 'pb-0',
+								message.failedMessage
+									? 'rounded border border-[#FACFD2] bg-[#F7EBEC]'
+									: isUser && 'rounded-xl bg-a8c-gray-100'
+							) }
+						>
+							<div className="relative">
+								<span className="sr-only">
+									{ isUser ? __( 'Your message' ) : __( 'Studio Assistant' ) },
+								</span>
+							</div>
+							{ isString ? (
+								<MarkDownWithCode
+									message={ message }
+									siteId={ siteId }
+									instanceId={ instanceId }
+									content={ children }
+								/>
+							) : (
+								children
+							) }
 						</div>
-						{ isString ? (
-							<MarkDownWithCode
-								message={ message }
-								siteId={ siteId }
-								instanceId={ instanceId }
-								content={ children }
-							/>
-						) : (
-							children
-						) }
 						{ message.content && (
 							<MessageActions
 								content={ message.content }
-								isAssistant={ message.role === 'assistant' }
+								isAssistant={ ! isUser }
 								onRate={ onRate }
 							/>
 						) }
diff --git a/apps/studio/src/components/chat-rating.tsx b/apps/studio/src/components/chat-rating.tsx
index 147f4cd1d1..0712239b43 100644
--- a/apps/studio/src/components/chat-rating.tsx
+++ b/apps/studio/src/components/chat-rating.tsx
@@ -1,9 +1,22 @@
 import { __ } from '@wordpress/i18n';
-import { thumbsUp, thumbsDown, Icon } from '@wordpress/icons';
+import { Icon, thumbsUp, thumbsDown } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
 import { useState } from 'react';
 import Button from 'src/components/button';
 import { cx } from 'src/lib/cx';
 
+const thumbsUpFilled = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="m3 12 1 8h1.5l-1-8H3Zm15.8-2h-4.4l.8-3.6c.3-1.3-.7-2.4-1.9-2.4h-.2c-.6 0-1.2.3-1.6.8l-5 6.6c-.3.4-.4.8-.4 1.2v.2l.7 5.4v.2c.2.9 1 1.5 1.9 1.5h8.2c.9 0 1.7-.6 1.9-1.4l1.8-6c.4-1.3-.6-2.6-1.9-2.6Z" />
+	</SVG>
+);
+
+const thumbsDownFilled = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M19.8 4h-1.5l1 8h1.5l-1-8ZM17 5.8c-.1-1-1-1.8-2-1.8H6.8c-.9 0-1.7.6-1.9 1.4l-1.8 6C2.7 12.7 3.7 14 5 14h4.4l-.8 3.6c-.3 1.3.7 2.4 1.9 2.4h.2c.6 0 1.2-.3 1.6-.8l5-6.6c.3-.4.5-.9.4-1.5L17 5.7Z" />
+	</SVG>
+);
+
 interface ChatRatingProps {
 	onRate?: ( ratingValue: number ) => void;
 	className?: string;
@@ -21,12 +34,18 @@ export const ChatRating = ( { onRate, className }: ChatRatingProps ) => {
 		}
 	};
 
+	const isVisible = ( value: number ) => selectedRating === null || selectedRating === value;
+
 	return (
 		<div className={ cx( 'flex items-center gap-1', className ) }>
-			{ ( selectedRating === null || selectedRating === 1 ) && (
+			<div
+				className="flex overflow-hidden transition-all duration-200 ease-in-out"
+				style={ { maxWidth: isVisible( 1 ) ? 36 : 0, opacity: isVisible( 1 ) ? 1 : 0 } }
+			>
 				<Button
 					variant="icon"
 					className={ cx(
+						'transition-colors duration-200',
 						selectedRating === 1
 							? 'text-a8c-green-50'
 							: 'text-a8c-gray-70 hover:!text-a8c-green-50'
@@ -34,13 +53,17 @@ export const ChatRating = ( { onRate, className }: ChatRatingProps ) => {
 					onClick={ () => handleClick( 1 ) }
 					tooltipText={ __( 'Helpful' ) }
 				>
-					<Icon size={ 18 } icon={ thumbsUp } />
+					<Icon size={ 18 } icon={ selectedRating === 1 ? thumbsUpFilled : thumbsUp } />
 				</Button>
-			) }
-			{ ( selectedRating === null || selectedRating === 0 ) && (
+			</div>
+			<div
+				className="flex overflow-hidden transition-all duration-200 ease-in-out"
+				style={ { maxWidth: isVisible( 0 ) ? 36 : 0, opacity: isVisible( 0 ) ? 1 : 0 } }
+			>
 				<Button
 					variant="icon"
 					className={ cx(
+						'transition-colors duration-200',
 						selectedRating === 0
 							? 'text-a8c-red-50'
 							: 'text-a8c-gray-70 hover:!text-a8c-red-50'
@@ -48,9 +71,9 @@ export const ChatRating = ( { onRate, className }: ChatRatingProps ) => {
 					onClick={ () => handleClick( 0 ) }
 					tooltipText={ __( 'Unhelpful' ) }
 				>
-					<Icon size={ 18 } icon={ thumbsDown } />
+					<Icon size={ 18 } icon={ selectedRating === 0 ? thumbsDownFilled : thumbsDown } />
 				</Button>
-			) }
+			</div>
 		</div>
 	);
 };

From 9aa3875594603458e2dd9a1e45089493482c0905 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 23 Feb 2026 19:27:52 -0500
Subject: [PATCH 10/10] Revert welcome message override to use API messages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/studio/src/components/content-tab-assistant.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/studio/src/components/content-tab-assistant.tsx b/apps/studio/src/components/content-tab-assistant.tsx
index 9e96ec08f5..19bb49803e 100644
--- a/apps/studio/src/components/content-tab-assistant.tsx
+++ b/apps/studio/src/components/content-tab-assistant.tsx
@@ -518,13 +518,7 @@ export function ContentTabAssistant( { selectedSite }: ContentTabAssistantProps
 									inputRef.current?.focus();
 								} }
 								showExamplePrompts={ messages.length === 0 }
-								messages={ [
-									__( "Hi! I'm Kit, your AI assistant." ),
-									__(
-										"I can design and build just about anything. I can make stores, blogs, portfolios, apps, you name it. Just describe what you want and I'll make it happen."
-									),
-									__( 'So, what are we making?' ),
-								] }
+								messages={ data?.messages ?? [] }
 								examplePrompts={ data?.example_prompts ?? [] }
 								disabled={ disabled }
 								isLoading={ isLoading }