Merge pull request #683 from StampyAI/Ticket-#591

Ticket #591
StampyAI · Jun 5, 2024 · 5aba6f8 · 5aba6f8
2 parents dc6a47c + 929486b
commit 5aba6f8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx
@@ -51,14 +51,14 @@ type QuestionInputProps = {
   initial?: string
   onChange?: (val: string) => void
   onAsk?: (val: string) => void
-  sticky?: boolean
+  fixed?: boolean
   placeholder?: string
 }
 const QuestionInput = ({
   initial,
   onChange,
   onAsk,
-  sticky,
+  fixed,
   placeholder = 'Ask Stampy a question...',
 }: QuestionInputProps) => {
   const [question, setQuestion] = useState(initial || '')
@@ -78,7 +78,7 @@ const QuestionInput = ({
   }
 
   return (
-    <div className={`widget-ask col-10 ${sticky ? 'sticky' : ''}`} ref={clickDetectorRef}>
+    <div className={'widget-ask ' + (fixed ? 'fixed col-10' : 'col-9')} ref={clickDetectorRef}>
       {results.length > 0 ? (
         <Button className="full-width suggestion" action={() => handleAsk(results[0].title)}>
           <p className="default">{results[0].title}</p>
@@ -87,7 +87,7 @@ const QuestionInput = ({
       <div className="flex-container">
         <Input
           placeholder={placeholder}
-          className="large full-width"
+          className={'large full-width ' + (fixed ? '' : 'shadowed')}
           value={question}
           onChange={(e) => handleChange(e.target.value)}
           onKeyDown={(e) => {
@@ -100,6 +100,7 @@ const QuestionInput = ({
         />
         <SendIcon className="send pointer" onClick={() => handleAsk(question)} />
       </div>
+      {fixed && <div className="white-space"></div>}
     </div>
   )
 }
@@ -325,7 +326,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
         <ChatEntry key={`chat-entry-${i}`} {...item} />
       ))}
 
-      <div className="padding-bottom-56">
+      <div className="padding-bottom-192">
         {followups ? (
           <Followups
             title="Continue the conversation"
@@ -338,7 +339,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
       <QuestionInput
         onAsk={onQuestion}
         placeholder={history.length > 0 ? 'Message Stampy' : undefined}
-        sticky
+        fixed
       />
 
       <div className={'warning-floating'}>

diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css
@@ -16,10 +16,14 @@
   }
 }
 
-.sticky {
-  position: sticky;
-  bottom: 0;
+.widget-ask {
+  position: relative;
 }
+.widget-ask.fixed {
+  position: fixed;
+  bottom: var(--spacing-48);
+}
+
 .right-icon {
   padding-right: var(--spacing-56);
 }
@@ -66,3 +70,13 @@
   right: 4px;
   bottom: 4px;
 }
+
+.white-space {
+  position: absolute;
+  left: -1000px;
+  width: calc(100% + 2000px);
+  height: 100px;
+  top: 100%;
+  z-index: 1000;
+  background: #ffffff;
+}
diff --git a/app/components/Input/input.css b/app/components/Input/input.css
@@ -6,10 +6,10 @@
   border-radius: var(--border-radius);
   border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
   background: var(--colors-white, #fff);
-  box-shadow: 0px 16px 40px 0px rgba(175, 183, 194, 0.2);
   color: var(--colors-cool-grey-900, #1b2b3e);
   padding: var(--spacing-8) 0 var(--spacing-8) var(--spacing-12);
-  height: var(--spacing-48);
+  /* This can't be a variable because it shouldn't shrink when the screen gets small */
+  height: 48px;
   font-size: 16px;
   font-weight: 300;
   line-height: 170%; /* 27.2px */
@@ -24,7 +24,7 @@
 /* size */
 
 .input.large {
-  height: var(--spacing-56);
+  height: 56px;
   font-size: 18px;
   letter-spacing: -0.18px;
 }