-
{ __( 'Was this helpful?' ) }
+ const isVisible = ( value: number ) => selectedRating === null || selectedRating === value;
+
+ return (
+
+
+
+
diff --git a/apps/studio/src/components/content-tab-assistant.tsx b/apps/studio/src/components/content-tab-assistant.tsx
index e2dcb75877..19bb49803e 100644
--- a/apps/studio/src/components/content-tab-assistant.tsx
+++ b/apps/studio/src/components/content-tab-assistant.tsx
@@ -13,7 +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 { 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';
@@ -124,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( () => {
@@ -156,6 +156,7 @@ const LastMessage = forwardRef<
message={ message }
siteId={ siteId }
instanceId={ instanceId }
+ onRate={ onRate }
>
{ showThinking ? (
@@ -183,7 +184,6 @@ const LastMessage = forwardRef<
instanceId={ instanceId }
content={ message.content }
/>
- { children }
) }
@@ -198,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(
@@ -208,6 +209,7 @@ const AuthenticatedView = memo(
siteId,
submitPrompt,
wrapperRef,
+ onRate,
}: AuthenticatedViewProps ) => {
const lastMessageRef = useRef< HTMLDivElement >( null );
const [ showThinking, setShowThinking ] = useState( isAssistantThinking );
@@ -278,6 +280,11 @@ const AuthenticatedView = memo(
message={ message }
siteId={ siteId }
instanceId={ instanceId }
+ onRate={
+ message.messageApiId
+ ? ( ratingValue ) => onRate( message.messageApiId!, ratingValue )
+ : undefined
+ }
>
{ message.content }
@@ -286,7 +293,7 @@ const AuthenticatedView = memo(
) }
>
),
- [ submitPrompt, siteId, instanceId ]
+ [ submitPrompt, siteId, instanceId, onRate ]
);
if ( messages.length === 0 ) {
@@ -304,17 +311,12 @@ const AuthenticatedView = memo(
ref={ lastMessageRef }
showThinking={ showThinking }
siteId={ siteId }
- >
-
- { !! lastMessage.messageApiId && (
-
- ) }
-
-
+ onRate={
+ lastMessage.messageApiId
+ ? ( ratingValue ) => onRate( lastMessage.messageApiId!, ratingValue )
+ : undefined
+ }
+ />
) }
>
);
@@ -421,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: [] } ) );
@@ -517,6 +531,7 @@ export function ContentTabAssistant( { selectedSite }: ContentTabAssistantProps
siteId={ selectedSite.id }
submitPrompt={ submitPrompt }
wrapperRef={ wrapperRef }
+ onRate={ handleRate }
/>
>
) : (
@@ -546,10 +561,8 @@ export function ContentTabAssistant( { selectedSite }: ContentTabAssistantProps
clearConversation={ clearConversation }
isAssistantThinking={ isAssistantThinking }
/>
-
- { createInterpolateElement( __( 'Powered by experimental AI.
' ), {
- learn_more_link:
,
- } ) }
+
+ { __( 'AI can make mistakes. Double-check responses.' ) }
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 (
);
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,
' );
- 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,
' );
-}
-
.components-tab-panel__tabs-item.is-active::after {
background: theme( 'colors.black' );
}