From fd1df23ff958dd22d347c9cd3b37ce0bf055b5a4 Mon Sep 17 00:00:00 2001
From: sherifButt <90522472+sherifButt@users.noreply.github.com>
Date: Sat, 9 Mar 2024 15:34:15 +0000
Subject: [PATCH] -styled input button to match input fields styling with
 darker background - dynamic input buttons and dropdown menues are mobile
 responsive now

---
 .../DynamicInput/OptionSelect/index.jsx       |  6 +++---
 .../ChatContainer/DynamicInput/index.jsx      |  2 +-
 .../PromptInput/SlashCommands/index.jsx       |  2 +-
 .../ChatContainer/PromptInput/index.jsx       |  9 ++++++---
 .../WorkspaceChat/ChatContainer/index.jsx     | 19 ++++++++++---------
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
index f8b4d7ef..5b69cc0a 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
@@ -11,10 +11,10 @@ const OptionSelect = ({ data, settings }) => {
         {data.options.map((option, index) => (
           <button
             key={index}
-            className="text-left p-2.5 border rounded-xl border-white/20 bg-sidebar hover:bg-workspace-item-selected-gradient"
+            className="shadow-lg hover:shadow-sm  transition-all duration-200 hover:animate-shine ease-in-out text-left p-2.5 border rounded-xl border-white/20 bg-sidebar hover:bg-workspace-item-selected-gradient"
             onClick={() => handleSelection(option.value)}
           >
-            <p className="font-semibold">{option.label}</p>
+            <p className="">{option.label}</p>
           </button>
         ))}
       </div>
@@ -58,7 +58,7 @@ const OptionSelect = ({ data, settings }) => {
         multiple={settings.allowMultiple}
         required={true}
         disabled={settings.disabled}
-        className="bg-sidebar text-white text-xs rounded-xl p-2.5 w-full border border-white/20 focus:ring-blue-500 focus:border-blue-500"
+        className="shadow-xl bg-sidebar text-white text-xs rounded-xl p-2.5 w-full border border-white/20 focus:ring-blue-500 focus:border-blue-500"
       >
         {settings.waitingForModels ? (
           <option disabled={true} selected={true}>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
index fbebab6c..deffe752 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
@@ -33,7 +33,7 @@ const DynamicInput = ({
     return null; // or any fallback UI
   }
   return (
-    <div className="w-full fixed md:absolute bottom-10 left-0 z-10 md:z-0 flex justify-center items-center">
+    <div className="w-full px-4 fixed md:absolute bottom-10 left-0 z-10 md:z-0 flex justify-center items-center">
       <div className="w-[600px]">
         <InputComponent {...inputs} />
         {isDynamicInput && inputs != undefined && (
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
index 4bd738f9..53f26c94 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
@@ -9,7 +9,7 @@ export default function SlashCommandsButton({ showing, setShowSlashCommand }) {
       data-tooltip-id="tooltip-slash-cmd-btn"
       data-tooltip-content="View all available slash commands for chatting."
       onClick={() => setShowSlashCommand(!showing)}
-      className={`flex justify-center items-center opacity-60 hover:opacity-100 cursor-pointer ${
+      className={`flex justify-center items-center opacity-30 hover:opacity-100 cursor-pointer ${
         showing ? "!opacity-100" : ""
       }`}
     >
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
index f545d692..5abb4c0b 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
@@ -8,6 +8,7 @@ import { isMobile } from "react-device-detect";
 import debounce from "lodash.debounce";
 
 export default function PromptInput({
+  className,
   workspace,
   message,
   submit,
@@ -52,7 +53,9 @@ export default function PromptInput({
 
   const watchForSlash = debounce(checkForSlash, 300);
   return (
-    <div className="w-full fixed md:absolute bottom-4 left-0 z-10 md:z-0 flex justify-center items-center">
+    <div
+      className={`w-full px-4 mb-4 fixed md:absolute ${className} left-0 z-10 md:z-0 flex justify-center items-center`}
+    >
       <SlashCommands
         showing={showSlashCommand}
         setShowing={setShowSlashCommand}
@@ -63,8 +66,8 @@ export default function PromptInput({
         className="flex flex-col gap-y-1 rounded-t-lg md:w-3/4 w-full mx-auto max-w-xl"
       >
         <div className="flex items-center rounded-lg md:mb-4">
-          <div className="w-[600px] bg-main-gradient shadow-2xl border border-white/50 rounded-2xl flex flex-col px-4 overflow-hidden">
-            <div className="flex items-center w-full border-b-2 border-gray-500/50">
+          <div className="w-[600px] bg-sidebar shadow-2xl border border-white/30 rounded-2xl flex flex-col px-4 overflow-hidden">
+            <div className="flex items-center w-full border-b-2 border-gray-500/30">
               <textarea
                 onKeyUp={adjustTextArea}
                 onKeyDown={captureEnter}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
index 78f7fdb8..34095d82 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
@@ -1,14 +1,14 @@
-import { useState, useEffect } from "react";
-import ChatHistory from "./ChatHistory";
-import PromptInput from "./PromptInput";
 import Workspace from "@/models/workspace";
 import handleChat from "@/utils/chat";
-import { isMobile } from "react-device-detect";
-import { SidebarMobileHeader } from "../../Sidebar";
-import { useParams } from "react-router-dom";
 import { extractMetaData } from "@/utils/chat/extractMetaData";
+import { CursorClick, Keyboard } from "@phosphor-icons/react";
+import { useEffect, useState } from "react";
+import { isMobile } from "react-device-detect";
+import { useParams } from "react-router-dom";
+import { SidebarMobileHeader } from "../../Sidebar";
+import ChatHistory from "./ChatHistory";
 import DynamicInput from "./DynamicInput";
-import { ArrowUUpLeft, Keyboard } from "@phosphor-icons/react";
+import PromptInput from "./PromptInput";
 
 export default function ChatContainer({
   workspace,
@@ -139,6 +139,7 @@ export default function ChatContainer({
     ) {
       return (
         <PromptInput
+          className={isDynamicInput && currentInputMeta?.inputs !== undefined ? "bottom-4" : "-bottom-2"}
           workspace={workspace}
           message={message}
           submit={handleSubmit}
@@ -177,11 +178,11 @@ export default function ChatContainer({
             >
               {isForcedTextInput ? (
                 <>
-                  <ArrowUUpLeft className="h-5 w-5" /> back to options
+                  <CursorClick className="h-5 w-5" /> use dynamic input
                 </>
               ) : (
                 <>
-                  <Keyboard className="h-5 w-5" /> Type another answer
+                  <Keyboard className="h-5 w-5" /> use keyboard input
                 </>
               )}
             </button>