feat(max): Answer feedback buttons

frontend/src/scenes/max/Thread.tsx

@@ -1,14 +1,16 @@
-import { LemonButton, Spinner } from '@posthog/lemon-ui'
+import { IconThumbsDown, IconThumbsDownFilled, IconThumbsUp, IconThumbsUpFilled, IconX } from '@posthog/icons'
+import { LemonButton, LemonInput, Spinner } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useValues } from 'kea'
 import { IconOpenInNew } from 'lib/lemon-ui/icons'
-import React from 'react'
+import posthog from 'posthog-js'
+import React, { useRef, useState } from 'react'
 import { urls } from 'scenes/urls'
 
 import { Query } from '~/queries/Query/Query'
 import { InsightQueryNode, InsightVizNode, NodeKind } from '~/queries/schema'
 
-import { maxLogic } from './maxLogic'
+import { maxLogic, ThreadMessage, TrendGenerationResult } from './maxLogic'
 
 export function Thread(): JSX.Element | null {
     const { thread, threadLoading } = useValues(maxLogic)
@@ -28,42 +30,12 @@ export function Thread(): JSX.Element | null {
                     )
                 }
 
-                const query = {
-                    kind: NodeKind.InsightVizNode,
-                    source: message.content?.answer,
-                }
-
                 return (
-                    <React.Fragment key={index}>
-                        {message.content?.reasoning_steps && (
-                            <Message role={message.role}>
-                                <ul className="list-disc ml-4">
-                                    {message.content.reasoning_steps.map((step, index) => (
-                                        <li key={index}>{step}</li>
-                                    ))}
-                                </ul>
-                            </Message>
-                        )}
-                        {message.status === 'completed' && message.content?.answer && (
-                            <Message role={message.role}>
-                                <div className="h-96 flex">
-                                    <Query query={query} readOnly embedded />
-                                </div>
-                                <LemonButton
-                                    className="mt-4 w-fit"
-                                    type="primary"
-                                    to={urls.insightNew(undefined, undefined, {
-                                        kind: NodeKind.InsightVizNode,
-                                        source: message.content.answer as InsightQueryNode,
-                                    } as InsightVizNode)}
-                                    sideIcon={<IconOpenInNew />}
-                                    targetBlank
-                                >
-                                    Open as new insight
-                                </LemonButton>
-                            </Message>
-                        )}
-                    </React.Fragment>
+                    <Answer
+                        key={index}
+                        message={message as ThreadMessage & { content: TrendGenerationResult }}
+                        previousMessage={thread[index - 1]}
+                    />
                 )
             })}
             {threadLoading && (
@@ -78,14 +50,180 @@ export function Thread(): JSX.Element | null {
     )
 }
 
-function Message({
-    role,
-    children,
-    className,
-}: React.PropsWithChildren<{ role: 'user' | 'assistant'; className?: string }>): JSX.Element {
+const Message = React.forwardRef<
+    HTMLDivElement,
+    React.PropsWithChildren<{ role: 'user' | 'assistant'; className?: string }>
+>(function Message({ role, children, className }, ref): JSX.Element {
     if (role === 'user') {
-        return <h2 className={clsx('mt-1 mb-3 text-2xl font-medium', className)}>{children}</h2>
+        return (
+            <div className={clsx('mt-1 mb-3 text-2xl font-medium', className)} ref={ref}>
+                {children}
+            </div>
+        )
+    }
+
+    return (
+        <div className={clsx('border p-2 rounded bg-bg-light', className)} ref={ref}>
+            {children}
+        </div>
+    )
+})
+
+function Answer({
+    message,
+    previousMessage,
+}: {
+    message: ThreadMessage & { content: TrendGenerationResult }
+    previousMessage: ThreadMessage
+}): JSX.Element {
+    const query = {
+        kind: NodeKind.InsightVizNode,
+        source: message.content?.answer,
+    }
+
+    return (
+        <>
+            {message.content?.reasoning_steps && (
+                <Message role={message.role}>
+                    <ul className="list-disc ml-4">
+                        {message.content.reasoning_steps.map((step, index) => (
+                            <li key={index}>{step}</li>
+                        ))}
+                    </ul>
+                </Message>
+            )}
+            {message.status === 'completed' && message.content?.answer && (
+                <>
+                    <Message role={message.role}>
+                        <div className="h-96 flex">
+                            <Query query={query} readOnly embedded />
+                        </div>
+                        <LemonButton
+                            className="mt-4 w-fit"
+                            type="primary"
+                            to={urls.insightNew(undefined, undefined, {
+                                kind: NodeKind.InsightVizNode,
+                                source: message.content.answer as InsightQueryNode,
+                            } as InsightVizNode)}
+                            sideIcon={<IconOpenInNew />}
+                            targetBlank
+                        >
+                            Open as new insight
+                        </LemonButton>
+                    </Message>
+                    <AnswerActions message={message} previousMessage={previousMessage} />
+                </>
+            )}
+        </>
+    )
+}
+
+function AnswerActions({
+    message,
+    previousMessage,
+}: {
+    message: ThreadMessage & { content: TrendGenerationResult }
+    previousMessage: ThreadMessage
+}): JSX.Element {
+    const [rating, setRating] = useState<'good' | 'bad' | null>(null)
+    const [feedback, setFeedback] = useState<string>('')
+    const [feedbackInputStatus, setFeedbackInputStatus] = useState<'hidden' | 'pending' | 'submitted'>('hidden')
+    const hasScrolledFeedbackInputIntoView = useRef<boolean>(false)
+
+    function submitRating(newRating: 'good' | 'bad'): void {
+        if (rating) {
+            return // Already rated
+        }
+        setRating(newRating)
+        posthog.capture('chat rating', {
+            question: previousMessage.content,
+            answer: message.content,
+            answer_rating: rating,
+        })
+        if (newRating === 'bad') {
+            setFeedbackInputStatus('pending')
+        }
     }
 
-    return <div className={clsx('border p-2 rounded bg-bg-light', className)}>{children}</div>
+    function submitFeedback(): void {
+        if (!feedback) {
+            return // Input is empty
+        }
+        posthog.capture('chat feedback', {
+            question: previousMessage.content,
+            answer: message.content,
+            feedback,
+        })
+        setFeedbackInputStatus('submitted')
+    }
+
+    return (
+        <>
+            <div className="flex items-center">
+                {rating !== 'bad' && (
+                    <LemonButton
+                        icon={rating === 'good' ? <IconThumbsUpFilled /> : <IconThumbsUp />}
+                        type="tertiary"
+                        size="small"
+                        tooltip="Good answer"
+                        onClick={() => submitRating('good')}
+                    />
+                )}
+                {rating !== 'good' && (
+                    <LemonButton
+                        icon={rating === 'bad' ? <IconThumbsDownFilled /> : <IconThumbsDown />}
+                        type="tertiary"
+                        size="small"
+                        tooltip="Bad answer"
+                        onClick={() => submitRating('bad')}
+                    />
+                )}
+            </div>
+            {feedbackInputStatus !== 'hidden' && (
+                <Message
+                    role="assistant"
+                    ref={(el) => {
+                        if (el && !hasScrolledFeedbackInputIntoView.current) {
+                            // When the feedback input is first rendered, scroll it into view
+                            el.scrollIntoView({ behavior: 'smooth' })
+                            hasScrolledFeedbackInputIntoView.current = true
+                        }
+                    }}
+                >
+                    <div className="flex items-center">
+                        <h4 className="m-0 text-sm grow">
+                            {feedbackInputStatus === 'pending'
+                                ? 'What disappointed you about the answer?'
+                                : 'Thank you for your feedback!'}
+                        </h4>
+                        <LemonButton
+                            icon={<IconX />}
+                            type="tertiary"
+                            size="xsmall"
+                            onClick={() => setFeedbackInputStatus('hidden')}
+                        />
+                    </div>
+                    {feedbackInputStatus === 'pending' && (
+                        <div className="flex w-full gap-2 items-center mt-1.5">
+                            <LemonInput
+                                placeholder="Help us improve Max…"
+                                fullWidth
+                                value={feedback}
+                                onChange={(newValue) => setFeedback(newValue)}
+                                onPressEnter={() => submitFeedback()}
+                                autoFocus
+                            />
+                            <LemonButton
+                                type="primary"
+                                onClick={() => submitFeedback()}
+                                disabledReason={!feedback ? 'Please type a few words!' : undefined}
+                            >
+                                Submit
+                            </LemonButton>
+                        </div>
+                    )}
+                </Message>
+            )}
+        </>
+    )
 }

frontend/src/scenes/max/maxLogic.ts

@@ -11,7 +11,7 @@ export interface MaxLogicProps {
     sessionId: string
 }
 
-interface TrendGenerationResult {
+export interface TrendGenerationResult {
     reasoning_steps?: string[]
     answer?: ExperimentalAITrendsQuery
 }