-styled input button to match input fields styling with darker background

- dynamic input buttons and dropdown menues are mobile responsive now

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}>

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 && (

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" : ""
       }`}
     >

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="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/50">
+            <div className="flex items-center w-full border-b-2 border-gray-500/30">
               <textarea
                 onKeyUp={adjustTextArea}
                 onKeyDown={captureEnter}

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>