kamp/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2024-06-30 14:40:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- dynamic input buttons and dropdown menues are mobile responsive now
This commit is contained in:
sherifButt 2024-03-09 15:34:15 +00:00
parent 6570ed0e57
commit fd1df23ff9
5 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/OptionSelect/index.jsx
View File

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

2
frontend/src/components/WorkspaceChat/ChatContainer/DynamicInput/index.jsx
View File

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

2
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/SlashCommands/index.jsx
View File

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

9
frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx
View File

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

19
frontend/src/components/WorkspaceChat/ChatContainer/index.jsx
View File

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