mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 08:33:20 +00:00
feat: enhance dropdown component and prompts integration
This commit is contained in:
Siddhant Rai
@@ -20,6 +20,7 @@ import {
|
||||
setSelectedAgent,
|
||||
} from '../preferences/preferenceSlice';
|
||||
import PromptsModal from '../preferences/PromptsModal';
|
||||
import Prompts from '../settings/Prompts';
|
||||
import { UserToolType } from '../settings/types';
|
||||
import AgentPreview from './AgentPreview';
|
||||
import { Agent } from './types';
|
||||
@@ -46,7 +47,7 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
|
||||
source: '',
|
||||
chunks: '',
|
||||
retriever: '',
|
||||
prompt_id: '',
|
||||
prompt_id: 'default',
|
||||
tools: [],
|
||||
agent_type: '',
|
||||
status: '',
|
||||
@@ -504,32 +505,32 @@ export default function NewAgent({ mode }: { mode: 'new' | 'edit' | 'draft' }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-[30px] bg-[#F6F6F6] px-6 py-3 dark:bg-[#383838] dark:text-[#E0E0E0]">
|
||||
<h2 className="text-lg font-semibold">Prompt</h2>
|
||||
<div className="mt-3 flex flex-wrap items-center gap-1">
|
||||
<div className="flex flex-wrap items-end gap-1">
|
||||
<div className="min-w-20 grow basis-full sm:basis-0">
|
||||
<Dropdown
|
||||
options={prompts.map((prompt) => ({
|
||||
label: prompt.name,
|
||||
value: prompt.id,
|
||||
}))}
|
||||
selectedValue={
|
||||
agent.prompt_id
|
||||
? prompts.filter(
|
||||
(prompt) => prompt.id === agent.prompt_id,
|
||||
)[0]?.name || null
|
||||
: null
|
||||
<Prompts
|
||||
prompts={prompts}
|
||||
selectedPrompt={
|
||||
prompts.find((prompt) => prompt.id === agent.prompt_id) ||
|
||||
prompts[0]
|
||||
}
|
||||
onSelect={(option: { label: string; value: string }) =>
|
||||
setAgent({ ...agent, prompt_id: option.value })
|
||||
onSelectPrompt={(name, id, type) =>
|
||||
setAgent({ ...agent, prompt_id: id })
|
||||
}
|
||||
size="w-full"
|
||||
rounded="3xl"
|
||||
border="border"
|
||||
buttonClassName="bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]"
|
||||
optionsClassName="bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E] dark:border-[#7E7E7E] dark:bg-dark-charcoal"
|
||||
placeholderClassName="text-gray-400 dark:text-silver"
|
||||
placeholder="Select a prompt"
|
||||
contentSize="text-sm"
|
||||
setPrompts={setPrompts}
|
||||
title="Prompt"
|
||||
titleClassName="text-lg font-semibold dark:text-[#E0E0E0]"
|
||||
showAddButton={false}
|
||||
dropdownProps={{
|
||||
size: 'w-full',
|
||||
rounded: '3xl',
|
||||
border: 'border',
|
||||
buttonClassName:
|
||||
'bg-white dark:bg-[#222327] border-silver dark:border-[#7E7E7E]',
|
||||
optionsClassName:
|
||||
'bg-white dark:bg-[#383838] border-silver dark:border-[#7E7E7E]',
|
||||
placeholderClassName: 'text-gray-400 dark:text-silver',
|
||||
contentSize: 'text-sm',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
|
||||
@@ -3,8 +3,9 @@ import React from 'react';
|
||||
import Arrow2 from '../assets/dropdown-arrow.svg';
|
||||
import Edit from '../assets/edit.svg';
|
||||
import Trash from '../assets/trash.svg';
|
||||
import { DropdownOption, DropdownProps } from './types/Dropdown.types';
|
||||
|
||||
function Dropdown({
|
||||
function Dropdown<T extends DropdownOption>({
|
||||
options,
|
||||
selectedValue,
|
||||
onSelect,
|
||||
@@ -20,36 +21,7 @@ function Dropdown({
|
||||
placeholder,
|
||||
placeholderClassName = 'text-gray-500 dark:text-gray-400',
|
||||
contentSize = 'text-base',
|
||||
}: {
|
||||
options:
|
||||
| string[]
|
||||
| { name: string; id: string; type: string }[]
|
||||
| { label: string; value: string }[]
|
||||
| { value: number; description: string }[];
|
||||
selectedValue:
|
||||
| string
|
||||
| { label: string; value: string }
|
||||
| { value: number; description: string }
|
||||
| { name: string; id: string; type: string }
|
||||
| null;
|
||||
onSelect:
|
||||
| ((value: string) => void)
|
||||
| ((value: { name: string; id: string; type: string }) => void)
|
||||
| ((value: { label: string; value: string }) => void)
|
||||
| ((value: { value: number; description: string }) => void);
|
||||
size?: string;
|
||||
rounded?: 'xl' | '3xl';
|
||||
buttonClassName?: string;
|
||||
optionsClassName?: string;
|
||||
border?: 'border' | 'border-2';
|
||||
showEdit?: boolean;
|
||||
onEdit?: (value: { name: string; id: string; type: string }) => void;
|
||||
showDelete?: boolean | ((option: any) => boolean);
|
||||
onDelete?: (value: string) => void;
|
||||
placeholder?: string;
|
||||
placeholderClassName?: string;
|
||||
contentSize?: string;
|
||||
}) {
|
||||
}: DropdownProps<T>) {
|
||||
const dropdownRef = React.useRef<HTMLDivElement>(null);
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
|
||||
|
||||
45
frontend/src/components/types/Dropdown.types.ts
Normal file
45
frontend/src/components/types/Dropdown.types.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
export type DropdownOptionBase = {
|
||||
id?: string;
|
||||
type?: string;
|
||||
};
|
||||
|
||||
export type StringOption = string;
|
||||
export type NameIdOption = { name: string; id: string } & DropdownOptionBase;
|
||||
export type LabelValueOption = {
|
||||
label: string;
|
||||
value: string;
|
||||
} & DropdownOptionBase;
|
||||
export type ValueDescriptionOption = {
|
||||
value: number;
|
||||
description: string;
|
||||
} & DropdownOptionBase;
|
||||
|
||||
export type DropdownOption =
|
||||
| StringOption
|
||||
| NameIdOption
|
||||
| LabelValueOption
|
||||
| ValueDescriptionOption;
|
||||
|
||||
export type DropdownSelectedValue = DropdownOption | null;
|
||||
|
||||
export type OnSelectHandler<T extends DropdownOption = DropdownOption> = (
|
||||
value: T,
|
||||
) => void;
|
||||
|
||||
export interface DropdownProps<T extends DropdownOption = DropdownOption> {
|
||||
options: T[];
|
||||
selectedValue: DropdownSelectedValue;
|
||||
onSelect: OnSelectHandler<T>;
|
||||
size?: string;
|
||||
rounded?: 'xl' | '3xl';
|
||||
buttonClassName?: string;
|
||||
optionsClassName?: string;
|
||||
border?: 'border' | 'border-2';
|
||||
showEdit?: boolean;
|
||||
onEdit?: (value: NameIdOption) => void;
|
||||
showDelete?: boolean | ((option: T) => boolean);
|
||||
onDelete?: (id: string) => void;
|
||||
placeholder?: string;
|
||||
placeholderClassName?: string;
|
||||
contentSize?: string;
|
||||
}
|
||||
@@ -133,10 +133,10 @@ layer(base);
|
||||
}
|
||||
|
||||
@utility table-default {
|
||||
@apply block w-full table-auto justify-center overflow-auto rounded-xl border border-silver text-center dark:border-silver/40 dark:text-bright-gray;
|
||||
@apply border-silver dark:border-silver/40 dark:text-bright-gray block w-full table-auto justify-center overflow-auto rounded-xl border text-center;
|
||||
|
||||
& th {
|
||||
@apply text-nowrap p-4 font-normal text-gray-400;
|
||||
@apply p-4 font-normal text-nowrap text-gray-400;
|
||||
}
|
||||
|
||||
& th {
|
||||
@@ -148,7 +148,7 @@ layer(base);
|
||||
}
|
||||
|
||||
& td {
|
||||
@apply w-full border-t border-silver px-4 py-2 dark:border-silver/40;
|
||||
@apply border-silver dark:border-silver/40 w-full border-t px-4 py-2;
|
||||
}
|
||||
|
||||
& td:last-child {
|
||||
@@ -208,483 +208,482 @@ layer(base);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base{
|
||||
@layer base {
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Sections
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: var(--viewport-height);
|
||||
overflow-x: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/*
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: var(--viewport-height);
|
||||
overflow-x: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
/*
|
||||
Avoid over-scrolling in mobile browsers
|
||||
*/
|
||||
@media only screen and (max-width: 500px) {
|
||||
body,
|
||||
html {
|
||||
min-height: var(--viewport-height);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
@media only screen and (max-width: 500px) {
|
||||
body,
|
||||
html {
|
||||
min-height: var(--viewport-height);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
button,
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
[type='button']::-moz-focus-inner,
|
||||
[type='reset']::-moz-focus-inner,
|
||||
[type='submit']::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
button:-moz-focusring,
|
||||
[type='button']:-moz-focusring,
|
||||
[type='reset']:-moz-focusring,
|
||||
[type='submit']:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
[type='checkbox'],
|
||||
[type='radio'] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[type='number']::-webkit-inner-spin-button,
|
||||
[type='number']::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
[type='search']::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[contentEditable]:empty:before {
|
||||
content: attr(placeholder);
|
||||
color: #9ca3af;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* third container laylout for Firefox */
|
||||
@-moz-document url-prefix() {
|
||||
.firefox {
|
||||
padding: 32px;
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* For screens with a maximum width of 768px (mobile) */
|
||||
@media (max-width: 768px) {
|
||||
.firefox {
|
||||
padding: 16px;
|
||||
[contentEditable]:empty:before {
|
||||
content: attr(placeholder);
|
||||
color: #9ca3af;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-weight: 100 200 300 400 500 600 700 800 900;
|
||||
src: url('/fonts/Inter-Variable.ttf');
|
||||
}
|
||||
/* third container laylout for Firefox */
|
||||
@-moz-document url-prefix() {
|
||||
.firefox {
|
||||
padding: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'IBMPlexMono-Medium';
|
||||
font-weight: 500;
|
||||
src: url('/fonts/IBMPlexMono-Medium.ttf');
|
||||
}
|
||||
/* For screens with a maximum width of 768px (mobile) */
|
||||
@media (max-width: 768px) {
|
||||
.firefox {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10;
|
||||
}
|
||||
/* Light mode specific autofill styles */
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #343541 !important;
|
||||
-webkit-box-shadow: 0 0 0 30px transparent inset !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: #343541;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-weight: 100 200 300 400 500 600 700 800 900;
|
||||
src: url('/fonts/Inter-Variable.ttf');
|
||||
}
|
||||
|
||||
/* Dark mode specific autofill styles */
|
||||
.dark input:-webkit-autofill,
|
||||
.dark input:-webkit-autofill:hover,
|
||||
.dark input:-webkit-autofill:focus,
|
||||
.dark input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #e5e7eb !important;
|
||||
-webkit-box-shadow: 0 0 0 30px transparent inset !important;
|
||||
background-color: transparent !important;
|
||||
caret-color: #e5e7eb;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'IBMPlexMono-Medium';
|
||||
font-weight: 500;
|
||||
src: url('/fonts/IBMPlexMono-Medium.ttf');
|
||||
}
|
||||
|
||||
/* Additional autocomplete dropdown styles for dark mode */
|
||||
.dark input:-webkit-autofill::first-line {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 10;
|
||||
}
|
||||
/* Light mode specific autofill styles */
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #343541 !important;
|
||||
-webkit-box-shadow: 0 0 0 30px transparent inset !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
caret-color: #343541;
|
||||
}
|
||||
|
||||
.inputbox-style {
|
||||
resize: none;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
/* Dark mode specific autofill styles */
|
||||
.dark input:-webkit-autofill,
|
||||
.dark input:-webkit-autofill:hover,
|
||||
.dark input:-webkit-autofill:focus,
|
||||
.dark input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: #e5e7eb !important;
|
||||
-webkit-box-shadow: 0 0 0 30px transparent inset !important;
|
||||
background-color: transparent !important;
|
||||
caret-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.bottom-safe {
|
||||
bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
/* Additional autocomplete dropdown styles for dark mode */
|
||||
.dark input:-webkit-autofill::first-line {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.ellipsis-text {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.inputbox-style {
|
||||
resize: none;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
font-family: 'IBMPlexMono-Medium', system-ui;
|
||||
}
|
||||
.bottom-safe {
|
||||
bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
.ellipsis-text {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
.logs-table {
|
||||
font-family: 'IBMPlexMono-Medium', system-ui;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-bubble {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
animation: fadeInUp 0.5s forwards;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-bubble {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
animation: fadeInUp 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -88,7 +88,7 @@ export default function General() {
|
||||
{' '}
|
||||
<div className="flex flex-col gap-4">
|
||||
{' '}
|
||||
<label className="text-base font-medium text-jet dark:text-bright-gray">
|
||||
<label className="text-jet dark:text-bright-gray text-base font-medium">
|
||||
{t('settings.general.selectTheme')}
|
||||
</label>
|
||||
<Dropdown
|
||||
@@ -106,7 +106,7 @@ export default function General() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-base font-medium text-jet dark:text-bright-gray">
|
||||
<label className="text-jet dark:text-bright-gray text-base font-medium">
|
||||
{t('settings.general.selectLanguage')}
|
||||
</label>
|
||||
<Dropdown
|
||||
@@ -124,7 +124,7 @@ export default function General() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-base font-medium text-jet dark:text-bright-gray">
|
||||
<label className="text-jet dark:text-bright-gray text-base font-medium">
|
||||
{t('settings.general.chunks')}
|
||||
</label>
|
||||
<Dropdown
|
||||
@@ -137,7 +137,7 @@ export default function General() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<label className="text-base font-medium text-jet dark:text-bright-gray">
|
||||
<label className="text-jet dark:text-bright-gray text-base font-medium">
|
||||
{t('settings.general.convHistory')}
|
||||
</label>
|
||||
<Dropdown
|
||||
@@ -169,13 +169,14 @@ export default function General() {
|
||||
dispatch(setPrompt({ name: name, id: id, type: type }))
|
||||
}
|
||||
setPrompts={setPrompts}
|
||||
dropdownProps={{ size: 'w-56', rounded: '3xl', border: 'border' }}
|
||||
/>
|
||||
</div>
|
||||
<hr className="my-4 w-[calc(min(665px,100%))] border-t border-silver dark:border-silver/40" />
|
||||
<hr className="border-silver dark:border-silver/40 my-4 w-[calc(min(665px,100%))] border-t" />
|
||||
<div className="flex flex-col gap-2">
|
||||
<button
|
||||
title={t('settings.general.deleteAllLabel')}
|
||||
className="flex w-fit cursor-pointer items-center justify-between rounded-3xl border border-solid border-rosso-corsa bg-transparent px-5 py-3 text-sm font-medium tracking-[0.015em] text-rosso-corsa transition-colors hover:bg-rosso-corsa hover:font-bold hover:tracking-normal hover:text-white"
|
||||
className="border-rosso-corsa text-rosso-corsa hover:bg-rosso-corsa flex w-fit cursor-pointer items-center justify-between rounded-3xl border border-solid bg-transparent px-5 py-3 text-sm font-medium tracking-[0.015em] transition-colors hover:font-bold hover:tracking-normal hover:text-white"
|
||||
onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
|
||||
>
|
||||
{t('settings.general.deleteAllBtn')}
|
||||
|
||||
@@ -4,17 +4,29 @@ import { useSelector } from 'react-redux';
|
||||
|
||||
import userService from '../api/services/userService';
|
||||
import Dropdown from '../components/Dropdown';
|
||||
import { DropdownProps } from '../components/types/Dropdown.types';
|
||||
import ConfirmationModal from '../modals/ConfirmationModal';
|
||||
import { ActiveState, PromptProps } from '../models/misc';
|
||||
import { selectToken } from '../preferences/preferenceSlice';
|
||||
import PromptsModal from '../preferences/PromptsModal';
|
||||
import ConfirmationModal from '../modals/ConfirmationModal';
|
||||
|
||||
type ExtendedPromptProps = PromptProps & {
|
||||
title?: string;
|
||||
titleClassName?: string;
|
||||
dropdownProps?: Partial<DropdownProps>;
|
||||
showAddButton?: boolean;
|
||||
};
|
||||
|
||||
export default function Prompts({
|
||||
prompts,
|
||||
selectedPrompt,
|
||||
onSelectPrompt,
|
||||
setPrompts,
|
||||
}: PromptProps) {
|
||||
title,
|
||||
titleClassName = 'dark:text-bright-gray font-medium',
|
||||
dropdownProps = {},
|
||||
showAddButton = true,
|
||||
}: ExtendedPromptProps) {
|
||||
const handleSelectPrompt = ({
|
||||
name,
|
||||
id,
|
||||
@@ -27,6 +39,7 @@ export default function Prompts({
|
||||
setEditPromptName(name);
|
||||
onSelectPrompt(name, id, type);
|
||||
};
|
||||
|
||||
const token = useSelector(selectToken);
|
||||
const [newPromptName, setNewPromptName] = React.useState('');
|
||||
const [newPromptContent, setNewPromptContent] = React.useState('');
|
||||
@@ -164,18 +177,19 @@ export default function Prompts({
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="font-medium dark:text-bright-gray">
|
||||
{t('settings.general.prompt')}
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className={titleClassName}>
|
||||
{title ? title : t('settings.general.prompt')}
|
||||
</p>
|
||||
<div className="flex flex-row items-baseline justify-start gap-6">
|
||||
<div className="flex flex-row flex-wrap items-baseline justify-start gap-6">
|
||||
<Dropdown
|
||||
options={prompts}
|
||||
selectedValue={selectedPrompt.name}
|
||||
options={prompts.map((prompt: any) =>
|
||||
typeof prompt === 'string'
|
||||
? { name: prompt, id: prompt, type: '' }
|
||||
: prompt,
|
||||
)}
|
||||
selectedValue={selectedPrompt ? selectedPrompt.name : ''}
|
||||
onSelect={handleSelectPrompt}
|
||||
size="w-56"
|
||||
rounded="3xl"
|
||||
border="border"
|
||||
showEdit
|
||||
showDelete={(prompt) => prompt.type !== 'public'}
|
||||
onEdit={({
|
||||
@@ -185,26 +199,29 @@ export default function Prompts({
|
||||
}: {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
type?: string;
|
||||
}) => {
|
||||
setModalType('EDIT');
|
||||
setEditPromptName(name);
|
||||
handleFetchPromptContent(id);
|
||||
setCurrentPromptEdit({ id: id, name: name, type: type });
|
||||
setCurrentPromptEdit({ id: id, name: name, type: type ?? '' });
|
||||
setModalState('ACTIVE');
|
||||
}}
|
||||
onDelete={handleDeletePrompt}
|
||||
placeholder={'Select a prompt'}
|
||||
{...dropdownProps}
|
||||
/>
|
||||
|
||||
<button
|
||||
className="h-10 w-20 rounded-3xl border border-solid border-violets-are-blue text-sm text-violets-are-blue transition-colors hover:bg-violets-are-blue hover:text-white"
|
||||
onClick={() => {
|
||||
setModalType('ADD');
|
||||
setModalState('ACTIVE');
|
||||
}}
|
||||
>
|
||||
{t('settings.general.add')}
|
||||
</button>
|
||||
{showAddButton && (
|
||||
<button
|
||||
className="border-violets-are-blue text-violets-are-blue hover:bg-violets-are-blue h-10 w-20 rounded-3xl border border-solid text-sm transition-colors hover:text-white"
|
||||
onClick={() => {
|
||||
setModalType('ADD');
|
||||
setModalState('ACTIVE');
|
||||
}}
|
||||
>
|
||||
{t('settings.general.add')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user