Add legal disclaimer and reposition empty chat components (#2380)

* Add legal disclaimer and reposition empty chat components

* Add link to General Privacy Statement

Author: reakaleek

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/AskAiSuggestions.tsx

@@ -1,8 +1,8 @@
 import { useModalActions } from '../modal.store'
 import { useChatActions } from './chat.store'
-import { EuiButton, useEuiTheme } from '@elastic/eui'
+import { useIsAskAiCooldownActive } from './useAskAiCooldown'
+import { EuiButton, EuiText, useEuiTheme, EuiSpacer } from '@elastic/eui'
 import { css } from '@emotion/react'
-import * as React from 'react'
 import { useMemo } from 'react'
 
 export interface AskAiSuggestion {
@@ -37,9 +37,10 @@ const ALL_SUGGESTIONS: AskAiSuggestion[] = [
     },
 ]
 
-export const AskAiSuggestions = ({ disabled }: { disabled?: boolean }) => {
+export const AskAiSuggestions = () => {
     const { submitQuestion } = useChatActions()
     const { setModalMode } = useModalActions()
+    const disabled = useIsAskAiCooldownActive()
     const { euiTheme } = useEuiTheme()
 
     // Randomly select 3 questions from the comprehensive list
@@ -50,29 +51,37 @@ export const AskAiSuggestions = ({ disabled }: { disabled?: boolean }) => {
     }, [])
 
     return (
-        <ul>
-            {selectedSuggestions.map((suggestion) => (
-                <li
-                    key={suggestion.question}
-                    css={css`
-                        margin-bottom: ${euiTheme.size.s};
-                    `}
-                >
-                    <EuiButton
-                        color="text"
-                        size="s"
-                        onClick={() => {
-                            if (!disabled) {
-                                submitQuestion(suggestion.question)
-                                setModalMode('askAi')
-                            }
-                        }}
-                        disabled={disabled}
+        <div
+            css={css`
+                padding-inline: ${euiTheme.size.base};
+            `}
+        >
+            <EuiSpacer size="m" />
+            <EuiText size="xs">Example questions:</EuiText>
+            <ul>
+                {selectedSuggestions.map((suggestion) => (
+                    <li
+                        key={suggestion.question}
+                        css={css`
+                            margin-top: ${euiTheme.size.s};
+                        `}
                     >
-                        {suggestion.question}
-                    </EuiButton>
-                </li>
-            ))}
-        </ul>
+                        <EuiButton
+                            color="text"
+                            size="s"
+                            onClick={() => {
+                                if (!disabled) {
+                                    submitQuestion(suggestion.question)
+                                    setModalMode('askAi')
+                                }
+                            }}
+                            disabled={disabled}
+                        >
+                            {suggestion.question}
+                        </EuiButton>
+                    </li>
+                ))}
+            </ul>
+        </div>
     )
 }

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/Chat.tsx

@@ -1,16 +1,16 @@
 import { InfoBanner } from '../InfoBanner'
 import { KeyboardShortcutsFooter } from '../KeyboardShortcutsFooter'
-import { SearchOrAskAiErrorCallout } from '../SearchOrAskAiErrorCallout'
+import { LegalDisclaimer } from '../LegalDisclaimer'
 import AiIcon from '../ai-icon.svg'
 import { useModalActions } from '../modal.store'
 import { AskAiSuggestions } from './AskAiSuggestions'
 import { ChatInput } from './ChatInput'
 import { ChatMessageList } from './ChatMessageList'
 import {
-    ChatMessage,
     useChatActions,
     useChatMessages,
     useChatScrollPosition,
+    useIsChatEmpty,
     useIsStreaming,
 } from './chat.store'
 import { useIsAskAiCooldownActive } from './useAskAiCooldown'
@@ -22,7 +22,6 @@ import {
     EuiHorizontalRule,
     EuiIcon,
     EuiSpacer,
-    EuiText,
     EuiToolTip,
     useEuiFontSize,
     useEuiOverflowScroll,
@@ -32,7 +31,8 @@ import { css } from '@emotion/react'
 import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 
 export const Chat = () => {
-    const messages = useChatMessages()
+    const { euiTheme } = useEuiTheme()
+    const isEmpty = useIsChatEmpty()
     const inputRef = useRef<HTMLTextAreaElement>(null)
     const scrollRef = useRef<HTMLDivElement>(null)
 
@@ -44,15 +44,11 @@ export const Chat = () => {
         inputRef.current?.focus()
     }, [])
 
-    const {
-        inputValue,
-        setInputValue,
-        handleSubmit,
-        handleAbort,
-        handleAbortReady,
-        isStreaming,
-        isCooldownActive,
-    } = useChatSubmit(scrollRef)
+    const [scrollAreaProps, setScrollAreaProps] = useState<{
+        onAbortReady: (abort: () => void) => void
+    }>({
+        onAbortReady: () => {},
+    })
 
     return (
         <EuiFlexGroup
@@ -62,26 +58,51 @@ export const Chat = () => {
         >
             <ChatHeader />
 
-            <ChatScrollArea
-                scrollRef={scrollRef}
-                onScroll={handleScroll}
-                messages={messages}
-                isCooldownActive={isCooldownActive}
-                onAbortReady={handleAbortReady}
-            />
+            {isEmpty ? (
+                <EuiFlexItem grow={true} css={emptyStateContainerStyles}>
+                    <EuiEmptyPrompt
+                        icon={<EuiIcon type={AiIcon} size="xxl" />}
+                        title={<h2>Hi! I'm the Elastic Docs AI Assistant</h2>}
+                        body={
+                            <p>
+                                I'm here to help you find answers about Elastic,
+                                powered entirely by our technical documentation.
+                                How can I help?
+                            </p>
+                        }
+                    />
+                </EuiFlexItem>
+            ) : (
+                <ChatScrollArea
+                    scrollRef={scrollRef}
+                    onScroll={handleScroll}
+                    onAbortReady={scrollAreaProps.onAbortReady}
+                />
+            )}
 
             <ChatInputArea
                 inputRef={inputRef}
-                value={inputValue}
-                onChange={setInputValue}
-                onSubmit={handleSubmit}
-                onAbort={handleAbort}
-                disabled={isCooldownActive}
-                isStreaming={isStreaming}
+                scrollRef={scrollRef}
                 onMetaSemicolon={handleMetaSemicolon}
+                onStateChange={setScrollAreaProps}
             />
 
+            {isEmpty && (
+                <>
+                    <AskAiSuggestions />
+                    <EuiSpacer size="m" />
+                    <div
+                        css={css`
+                            padding-inline: ${euiTheme.size.base};
+                        `}
+                    >
+                        <LegalDisclaimer />
+                    </div>
+                </>
+            )}
+
             <InfoBanner />
+
             <KeyboardShortcutsFooter shortcuts={KEYBOARD_SHORTCUTS} />
         </EuiFlexGroup>
     )
@@ -154,18 +175,15 @@ const ChatHeader = () => {
 interface ChatScrollAreaProps {
     scrollRef: RefObject<HTMLDivElement>
     onScroll: () => void
-    messages: ChatMessage[]
-    isCooldownActive: boolean
     onAbortReady: (abort: () => void) => void
 }
 
 const ChatScrollArea = ({
     scrollRef,
     onScroll,
-    messages,
-    isCooldownActive,
     onAbortReady,
 }: ChatScrollAreaProps) => {
+    const messages = useChatMessages()
     const { euiTheme } = useEuiTheme()
 
     const scrollableStyles = css`
@@ -179,69 +197,48 @@ const ChatScrollArea = ({
     return (
         <EuiFlexItem grow={true} css={scrollContainerStyles}>
             <div ref={scrollRef} css={scrollableStyles} onScroll={onScroll}>
-                {messages.length === 0 ? (
-                    <ChatEmptyState disabled={isCooldownActive} />
-                ) : (
-                    <div css={messagesStyles}>
-                        <ChatMessageList
-                            messages={messages}
-                            onAbortReady={onAbortReady}
-                        />
-                    </div>
-                )}
+                <div css={messagesStyles}>
+                    <ChatMessageList
+                        messages={messages}
+                        onAbortReady={onAbortReady}
+                    />
+                </div>
             </div>
         </EuiFlexItem>
     )
 }
 
-const ChatEmptyState = ({ disabled }: { disabled: boolean }) => (
-    <>
-        <EuiEmptyPrompt
-            icon={<EuiIcon type={AiIcon} size="xxl" />}
-            title={<h2>Hi! I'm the Elastic Docs AI Assistant</h2>}
-            body={
-                <p>
-                    I'm here to help you find answers about Elastic, powered
-                    entirely by our technical documentation. How can I help?
-                </p>
-            }
-        />
-        <EuiSpacer size="s" />
-        <div>
-            <EuiText size="xs" color="subdued">
-                Example questions
-            </EuiText>
-            <EuiSpacer size="s" />
-            <AskAiSuggestions disabled={disabled} />
-        </div>
-        <div css={messagesStyles}>
-            <SearchOrAskAiErrorCallout error={null} domain="askAi" />
-        </div>
-    </>
-)
-
 interface ChatInputAreaProps {
     inputRef: RefObject<HTMLTextAreaElement>
-    value: string
-    onChange: (value: string) => void
-    onSubmit: (question: string) => void
-    onAbort: () => void
-    disabled: boolean
-    isStreaming: boolean
+    scrollRef: RefObject<HTMLDivElement>
     onMetaSemicolon?: () => void
+    onStateChange?: (state: {
+        onAbortReady: (abort: () => void) => void
+    }) => void
 }
 
 const ChatInputArea = ({
     inputRef,
-    value,
-    onChange,
-    onSubmit,
-    onAbort,
-    disabled,
-    isStreaming,
+    scrollRef,
     onMetaSemicolon,
+    onStateChange,
 }: ChatInputAreaProps) => {
     const { euiTheme } = useEuiTheme()
+    const {
+        inputValue,
+        setInputValue,
+        handleSubmit,
+        handleAbort,
+        handleAbortReady,
+        isStreaming,
+        isCooldownActive,
+    } = useChatSubmit(scrollRef)
+
+    useEffect(() => {
+        onStateChange?.({
+            onAbortReady: handleAbortReady,
+        })
+    }, [handleAbortReady, onStateChange])
 
     return (
         <EuiFlexItem grow={false}>
@@ -253,11 +250,11 @@ const ChatInputArea = ({
                 `}
             >
                 <ChatInput
-                    value={value}
-                    onChange={onChange}
-                    onSubmit={onSubmit}
-                    onAbort={onAbort}
-                    disabled={disabled}
+                    value={inputValue}
+                    onChange={setInputValue}
+                    onSubmit={handleSubmit}
+                    onAbort={handleAbort}
+                    disabled={isCooldownActive}
                     inputRef={inputRef}
                     isStreaming={isStreaming}
                     onMetaSemicolon={onMetaSemicolon}
@@ -394,6 +391,12 @@ const scrollContainerStyles = css`
     overflow: hidden;
 `
 
+const emptyStateContainerStyles = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
 const messagesStyles = css`
     max-width: 800px;
     margin: 0 auto;

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/chat.store.ts

@@ -434,3 +434,5 @@ export const useIsStreaming = () =>
         const last = state.chatMessages[state.chatMessages.length - 1]
         return last?.type === 'ai' && last?.status === 'streaming'
     })
+export const useIsChatEmpty = () =>
+    chatStore((state) => state.chatMessages.length === 0)

src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/InfoBanner.tsx

@@ -29,17 +29,16 @@ export const InfoBanner = () => {
                     label="Alpha"
                     size="s"
                     color="accent"
-                    tooltipContent="This feature is in private preview and is only enabled if you are in Elastic's Global VPN."
+                    tooltipContent="This feature is in private preview."
                 />
-
+                ·
                 <EuiText color="subdued" size="s">
-                    This feature is in private preview.{' '}
                     <EuiLink
                         target="_blank"
                         rel="noopener noreferrer"
                         href="https://github.com/elastic/docs-eng-team/issues/new?template=search-or-ask-ai-feedback.yml"
                     >
-                        Got feedback? We'd love to hear it!
+                        Give feedback
                     </EuiLink>
                 </EuiText>
             </div>