pages/index: на главную страницу добавлен компонент чата, предлагающий начать общение

plugins/docuservix/pages/chat/ChatPage.tsx

@@ -21,11 +21,7 @@ export function ChatPage(): ReactNode {
     return (
         <Layout title="Чат">
             <main className="container margin-vert--lg">
-                <Chat
+                <Chat dialog={dialog} />
-                    dialog={dialog}
-                    statusMessage="Unable to connect to the server"
-                    typing
-                />
             </main>
         </Layout>
     );

plugins/docuservix/widgets/chat/Chat.module.css

@@ -7,18 +7,3 @@
     border-radius: var(--ifm-global-radius);
     overflow: hidden;
 }
-
-.Chat__statusMessage {
-    font-size: .65rem;
-    color: #666;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: .75rem 2.5rem;
-    background: #eee;
-}
-
-.Chat__statusMessage i {
-    margin-right: .25rem;
-    color: #667eea;
-}

plugins/docuservix/widgets/chat/Chat.tsx

@@ -1,7 +1,7 @@
 import block from 'bem-css-modules';
 import React, { ReactNode } from 'react';
 
-import { IChat } from '@docuservix/models/chat';
+import { IChat, IChatMessage } from '@docuservix/models/chat';
 
 import styles from './Chat.module.css';
 import { Header } from './Header';
@@ -12,12 +12,11 @@ const b = block(styles, 'Chat');
 
 interface ChatProps {
     dialog: IChat;
-    typing?: boolean;
+    loading?: boolean;
-    statusMessage?: string;
     onSend?: (text: string) => void;
 }
 
-export function Chat({ dialog, typing, statusMessage, onSend }: ChatProps): ReactNode {
+export function Chat({ dialog, loading, onSend }: ChatProps): ReactNode {
     const { messages } = dialog;
 
     return (
@@ -25,11 +24,10 @@ export function Chat({ dialog, typing, statusMessage, onSend }: ChatProps): Reac
             <Header />
             <Messages
                 messages={messages}
-                typing={typing}
+                loading={loading}
             />
-            {statusMessage && <div className={b('statusMessage')}>{statusMessage}</div>}
             <Input
-                loading={typing}
+                loading={loading}
                 onSend={onSend}
             />
         </div>

plugins/docuservix/widgets/chat/Input.module.css

@@ -33,9 +33,6 @@
 }
 
 .Input__send {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: 3.25rem;
     height: 3.25rem;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

plugins/docuservix/widgets/chat/Messages.tsx

@@ -10,10 +10,10 @@ const b = block(styles, 'Messages');
 
 interface MessagesProps {
     messages: IChatMessage[];
-    typing?: boolean;
+    loading?: boolean;
 }
 
-export function Messages({ messages, typing }: MessagesProps): ReactNode {
+export function Messages({ messages, loading }: MessagesProps): ReactNode {
     return (
         <div className={b()}>
             {messages.map((msg, i) => (
@@ -24,7 +24,7 @@ export function Messages({ messages, typing }: MessagesProps): ReactNode {
                 />
             ))}
 
-            {typing && (
+            {loading && (
                 <div className={b('typing')}>
                     <div className={b('typingIndicator')}>
                         <span></span>

plugins/docuservix/widgets/chat/icons.tsx

@@ -1,30 +1,31 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 
-export function RobotIcon(): ReactNode {
+export function RobotIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="32"
+            viewBox="0 0 640 512"
-            height="32"
             fill="currentColor"
-            viewBox="0 0 16 16"
+            width="1em"
+            height="1em"
+            {...props}
         >
-            <path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
+            <path d="M320 0c17.7 0 32 14.3 32 32v64h120c48.6 0 88 39.4 88 88v272c0 48.6-39.4 88-88 88H168c-48.6 0-88-39.4-88-88V184c0-48.6 39.4-88 88-88h120V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h224c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm-48-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm288-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 224c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V256c0-17.7-14.3-32-32-32zm512 0c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32s32-14.3 32-32V256c0-17.7-14.3-32-32-32z" />
-            <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
         </svg>
     );
 }
 
-export function PaperPlaneIcon(): ReactNode {
+export function PaperPlaneIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            width="24"
+            viewBox="0 0 512 512"
-            height="24"
             fill="currentColor"
-            viewBox="0 0 16 16"
+            width="1em"
+            height="1em"
+            {...props}
         >
-            <path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z" />
+            <path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 googl492.3 160 480v-83.6c0-4 1.5-7.8 4.2-10.7l167.6-182.8c5.8-6.3 5.4-16.1-.9-21.9s-16.1-5.4-21.9 .9L106.2 350.8 13.7 313.4C3.2 309 -2 297.3 .5 286.4s11.3-18.9 22.4-21L490.5 .6c10.1-2 20.6 1.7 27.6 8.7L498.1 5.6z" />
         </svg>
     );
 }

src/pages/index.tsx

@@ -1,12 +1,26 @@
 import Link from '@docusaurus/Link';
+import { useHistory } from '@docusaurus/router';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Heading from '@theme/Heading';
 import Layout from '@theme/Layout';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 
+import { IChat } from '@docuservix/models/chat';
+import { Chat } from '@docuservix/widgets/chat';
+
 import styles from './index.module.css';
 
+const startDialog: IChat = {
+    messages: [
+        {
+            role: 'assistant',
+            content: 'Чем могу помочь?',
+        },
+    ],
+};
+
 function HomepageHeader() {
     const { siteConfig } = useDocusaurusContext();
 
@@ -35,6 +49,12 @@ function HomepageHeader() {
 
 export default function Home(): ReactNode {
     const { siteConfig } = useDocusaurusContext();
+    const history = useHistory();
+    const chatUrl = useBaseUrl('/chat');
+
+    const handleSend = (text: string) => {
+        history.push(`${chatUrl}?q=${encodeURIComponent(text)}`);
+    };
 
     return (
         <Layout
@@ -42,6 +62,12 @@ export default function Home(): ReactNode {
             description="Description will go into a meta tag in <head />"
         >
             <HomepageHeader />
+            <main className="container margin-vert--lg">
+                <Chat
+                    dialog={startDialog}
+                    onSend={handleSend}
+                />
+            </main>
         </Layout>
     );
 }