Improve chatbot

eea · Aug 27, 2024 · 89d3cee · 89d3cee
1 parent 1dadf20
commit 89d3cee
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 14 deletions.
diff --git a/src/ChatBlock/ChatBlockEdit.jsx b/src/ChatBlock/ChatBlockEdit.jsx
@@ -9,10 +9,11 @@ import withDanswerData from './withDanswerData';
 const SearchBlockEdit = (props) => {
   const { onChangeBlock, block, assistants } = props;
 
-  const schema = React.useMemo(
-    () => ChatBlockSchema({ assistants }),
-    [assistants],
-  );
+  const schema = React.useMemo(() => ChatBlockSchema({ assistants }), [
+    assistants,
+  ]);
+
+  console.log('data', props.data);
 
   return (
     <div>

diff --git a/src/ChatBlock/ChatBlockView.jsx b/src/ChatBlock/ChatBlockView.jsx
@@ -4,14 +4,13 @@ import ChatWindow from './ChatWindow';
 import superagent from 'superagent';
 
 function ChatBlockView(props) {
-  const { assistantData } = props;
+  const { assistantData, data } = props;
 
   return assistantData ? (
-    <div>
-      <div>
-        <ChatWindow persona={assistantData} />
-      </div>
-    </div>
+    <ChatWindow
+      persona={assistantData}
+      placeholderPrompt={data.placeholderPrompt}
+    />
   ) : (
     <div>Chatbot</div>
   );

diff --git a/src/ChatBlock/ChatWindow.jsx b/src/ChatBlock/ChatWindow.jsx
@@ -12,7 +12,12 @@ import SendIcon from './../icons/send.svg';
 
 import './style.less';
 
-function ChatWindow({ persona, rehypePrism, remarkGfm }) {
+function ChatWindow({
+  persona,
+  rehypePrism,
+  remarkGfm,
+  placeholderPrompt = 'Ask a question',
+}) {
   const libs = { rehypePrism, remarkGfm }; // rehypePrism, remarkGfm
   const { onSubmit, messages, isStreaming, clearChat } = useBackendChat({
     persona,
@@ -91,7 +96,7 @@ function ChatWindow({ persona, rehypePrism, remarkGfm }) {
               ref={textareaRef}
               value={input}
               placeholder={
-                messages.length > 0 ? 'Ask follow-up...' : 'Placeholder text'
+                messages.length > 0 ? 'Ask follow-up...' : placeholderPrompt
               }
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => {

diff --git a/src/ChatBlock/schema.js b/src/ChatBlock/schema.js
@@ -5,14 +5,18 @@ export function ChatBlockSchema({ assistants }) {
       {
         id: 'default',
         title: 'Defalt',
-        fields: ['assistant'],
+        fields: ['assistant', 'placeholderPrompt'],
       },
     ],
     properties: {
       assistant: {
         title: 'Assistant',
         choices: assistants?.map(({ id, name }) => [id.toString(), name]),
       },
+      placeholderPrompt: {
+        default: 'Ask a question',
+        title: 'Prompt',
+      },
     },
     required: [],
   };

diff --git a/src/ChatBlock/withDanswerData.jsx b/src/ChatBlock/withDanswerData.jsx
@@ -1,4 +1,21 @@
 import React from 'react';
+import {
+  PlaceholderParagraph,
+  PlaceholderLine,
+  PlaceholderHeader,
+  Placeholder,
+} from 'semantic-ui-react';
+
+const Loader = () => (
+  <Placeholder>
+    <PlaceholderParagraph>
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+      <PlaceholderLine />
+    </PlaceholderParagraph>
+  </Placeholder>
+);
 
 export default function withDanswerData(callback) {
   function wrapper(Component) {
@@ -21,7 +38,7 @@ export default function withDanswerData(callback) {
       return state ? (
         <Component {...props} {...state} />
       ) : (
-        <div>Fetching external data...</div>
+        <Loader active={true} />
       );
     }
     return WrappedComponent;