From 89d3cee81cc306cf2e3b4d66cbff0a77c9e7ede6 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Tue, 27 Aug 2024 13:45:08 +0300
Subject: [PATCH] Improve chatbot

---
 src/ChatBlock/ChatBlockEdit.jsx   |  9 +++++----
 src/ChatBlock/ChatBlockView.jsx   | 11 +++++------
 src/ChatBlock/ChatWindow.jsx      |  9 +++++++--
 src/ChatBlock/schema.js           |  6 +++++-
 src/ChatBlock/withDanswerData.jsx | 19 ++++++++++++++++++-
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/ChatBlock/ChatBlockEdit.jsx b/src/ChatBlock/ChatBlockEdit.jsx
index 51e745e..d1ea497 100644
--- 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
index cb740d8..8ab99a4 100644
--- 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
index 5ea11e7..aefd770 100644
--- 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
index cd4cca2..594c68b 100644
--- a/src/ChatBlock/schema.js
+++ b/src/ChatBlock/schema.js
@@ -5,7 +5,7 @@ export function ChatBlockSchema({ assistants }) {
       {
         id: 'default',
         title: 'Defalt',
-        fields: ['assistant'],
+        fields: ['assistant', 'placeholderPrompt'],
       },
     ],
     properties: {
@@ -13,6 +13,10 @@ export function ChatBlockSchema({ assistants }) {
         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
index 6986397..15c70b4 100644
--- 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;