tickets: #591 #590

app/components/Chatbot/index.tsx

@@ -68,10 +68,11 @@ type QuestionInputProps = {
 }
 const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
   const [question, setQuestion] = useState(initial || '')
-
+  const [placeholder, setPlaceholder] = useState('Ask Stampy a question...')
   const handleAsk = (val: string) => {
     onAsk && onAsk(val)
     setQuestion('')
+    setPlaceholder('Message Stampy')
   }
 
   const handleChange = (val: string) => {
@@ -84,7 +85,7 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
       <input
         type="text"
         className="full-width bordered secondary right-icon"
-        placeholder="Ask Stampy a question..."
+        placeholder={placeholder}
         value={question}
         onChange={(e) => handleChange(e.target.value)}
         onKeyDown={(e) => {
@@ -263,6 +264,14 @@ export const Chatbot = ({question, questions}: {question?: string; questions?: s
         />
       ) : undefined}
       <QuestionInput onAsk={onQuestion} />
+
+      <div className={'warning-floating'}>
+        <p className={'xs'}>
+          <span className={'red xs-bold'}>Caution! </span>
+          This is an early prototype. Don’t automatically trust what it says, and make sure to
+          follow its sources.
+        </p>
+      </div>
     </div>
   )
 }

app/components/Chatbot/widgit.css

@@ -20,19 +20,29 @@
     width: 100%;
   }
 }
-.height-70{
-     height: 70vh;
-     overflow-x: hidden;
-   }
-.widget-ask{
-    position: sticky;
-    bottom: 0;
-}
-.pointer{
-     position: absolute;
-     right: 0;
-     margin: 4px;
- }
-.right-icon{
-    padding-right: var(--spacing-56);
-}
+.height-70 {
+  height: 70vh;
+  overflow-x: hidden;
+}
+.widget-ask {
+  position: sticky;
+  bottom: 0;
+}
+.pointer {
+  position: absolute;
+  right: 0;
+  margin: 4px;
+}
+.right-icon {
+  padding-right: var(--spacing-56);
+}
+.warning-floating {
+  position: fixed;
+  right: 7vw;
+  z-index: 100;
+  bottom: 5vw;
+  width: 11vw;
+}
+.red {
+  color: #d40000;
+}