chore: restyle modal with model select (#202)
chore: set normal font size for sidebar chore: set normal gradient for `ChatInput`
This commit is contained in:
Danil Shishkevich
GitHub
parent
5d9bc10cf4
commit
6d5d09d69f
|
|
@ -126,12 +126,12 @@ export const Chat: FC<Props> = ({
|
|||
{conversation.messages.length === 0 ? (
|
||||
<>
|
||||
<div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
|
||||
<div className="text-center text-4xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
<div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
|
||||
{models.length === 0 ? t('Loading...') : 'Chatbot UI'}
|
||||
</div>
|
||||
|
||||
{models.length > 0 && (
|
||||
<div className="flex h-full flex-col space-y-4 rounded border border-neutral-500 p-4">
|
||||
<div className="flex h-full flex-col space-y-4 rounded border border-neutral-200 dark:border-neutral-600 p-4">
|
||||
<ModelSelect
|
||||
model={conversation.model}
|
||||
models={models}
|
||||
|
|
|
|||
|
|
@ -102,11 +102,11 @@ export const ChatInput: FC<Props> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="dark:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-transparent bg-white from-[#343541] via-[#343541] to-[#343541]/0 pt-6 dark:border-white/20 dark:bg-[#444654] dark:!bg-transparent dark:bg-gradient-to-t md:pt-2">
|
||||
<div className="absolute bottom-0 left-0 w-full border-transparent pt-6 dark:border-white/20 bg-gradient-to-b from-transparent via-white to-white dark:via-[#343541] dark:to-[#343541] md:pt-2">
|
||||
<div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
|
||||
{messageIsStreaming && (
|
||||
<button
|
||||
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-gray-500 py-2 px-4 text-black hover:opacity-50 dark:bg-[#343541] dark:text-white md:top-0"
|
||||
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
|
||||
onClick={handleStopConversation}
|
||||
>
|
||||
<IconPlayerStop size={16} className="mb-[2px] inline-block" />{' '}
|
||||
|
|
@ -116,7 +116,7 @@ export const ChatInput: FC<Props> = ({
|
|||
|
||||
{!messageIsStreaming && messages.length > 0 && (
|
||||
<button
|
||||
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-gray-500 py-2 px-4 text-black hover:opacity-50 dark:bg-[#343541] dark:text-white md:top-0"
|
||||
className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
|
||||
onClick={onRegenerate}
|
||||
>
|
||||
<IconRepeat size={16} className="mb-[2px] inline-block" />{' '}
|
||||
|
|
@ -148,7 +148,7 @@ export const ChatInput: FC<Props> = ({
|
|||
/>
|
||||
|
||||
<button
|
||||
className="absolute right-5 rounded-sm p-1 text-neutral-800 hover:bg-neutral-200 hover:text-neutral-900 focus:outline-none dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
|
||||
className="absolute right-3 rounded-sm p-1 text-neutral-800 hover:bg-neutral-200 hover:text-neutral-900 focus:outline-none dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
|
||||
onClick={handleSend}
|
||||
>
|
||||
<IconSend size={16} className="opacity-60" />
|
||||
|
|
|
|||
|
|
@ -15,22 +15,26 @@ export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
|
|||
<label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
|
||||
{t('Model')}
|
||||
</label>
|
||||
<select
|
||||
className="focus:shadow-outline w-full cursor-pointer appearance-none rounded-lg border border-neutral-500 p-3 text-neutral-900 dark:bg-[#343541] dark:text-white"
|
||||
placeholder={t('Select a model') || ''}
|
||||
value={model.id}
|
||||
onChange={(e) => {
|
||||
onModelChange(
|
||||
models.find((model) => model.id === e.target.value) as OpenAIModel,
|
||||
);
|
||||
}}
|
||||
>
|
||||
{models.map((model) => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="w-full rounded-lg border border-neutral-200 pr-2 bg-transparent text-neutral-900 dark:border-neutral-600 dark:text-white">
|
||||
<select
|
||||
className="bg-transparent w-full outline-0 p-2"
|
||||
placeholder={t('Select a model') || ''}
|
||||
value={model.id}
|
||||
onChange={(e) => {
|
||||
onModelChange(
|
||||
models.find(
|
||||
(model) => model.id === e.target.value,
|
||||
) as OpenAIModel,
|
||||
);
|
||||
}}
|
||||
>
|
||||
{models.map((model) => (
|
||||
<option key={model.id} value={model.id}>
|
||||
{model.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
|
|||
</label>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
className="w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
|
||||
className="w-full rounded-lg border border-neutral-200 px-4 py-3 text-neutral-900 focus:outline-none bg-transparent dark:border-neutral-600 dark:text-neutral-100"
|
||||
style={{
|
||||
resize: 'none',
|
||||
bottom: `${textareaRef?.current?.scrollHeight}px`,
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
|
|||
<div className="flex w-full cursor-pointer items-center rounded-md py-3 px-3 hover:bg-[#343541]">
|
||||
<IconTrash size={18} />
|
||||
|
||||
<div className="ml-3 flex-1 text-left text-white">
|
||||
<div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-white">
|
||||
{t('Are you sure?')}
|
||||
</div>
|
||||
|
||||
<div className="flex w-[40px]">
|
||||
<IconCheck
|
||||
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
|
||||
className="ml-auto min-w-[20px] mr-1 text-neutral-400 hover:text-neutral-100"
|
||||
size={18}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export const ConversationComponent: FC<Props> = ({
|
|||
|
||||
return (
|
||||
<button
|
||||
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[12px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90 ${
|
||||
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[12.5px] leading-3 transition-colors duration-200 hover:bg-[#343541]/90 ${
|
||||
loading ? 'disabled:cursor-not-allowed' : ''
|
||||
} ${
|
||||
selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
|
|||
return (
|
||||
<div className="relative flex items-center">
|
||||
<input
|
||||
className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-[12px] leading-normal text-white"
|
||||
className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-[12px] leading-3 text-white"
|
||||
type="text"
|
||||
placeholder={t('Search conversations...') || ''}
|
||||
value={searchTerm}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export const Sidebar: FC<Props> = ({
|
|||
>
|
||||
<header className="flex items-center">
|
||||
<button
|
||||
className="flex w-[190px] flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12px] leading-normal text-white transition-colors duration-200 select-none hover:bg-gray-500/10"
|
||||
className="flex w-[190px] flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12.5px] leading-3 text-white transition-colors duration-200 select-none hover:bg-gray-500/10"
|
||||
onClick={() => {
|
||||
onNewConversation();
|
||||
setSearchTerm('');
|
||||
|
|
@ -133,7 +133,7 @@ export const Sidebar: FC<Props> = ({
|
|||
</button>
|
||||
|
||||
<button
|
||||
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12.5px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={() => onCreateFolder(t('New folder'))}
|
||||
>
|
||||
<IconFolderPlus size={18} />
|
||||
|
|
@ -194,7 +194,7 @@ export const Sidebar: FC<Props> = ({
|
|||
) : (
|
||||
<div className="mt-8 text-white text-center opacity-50 select-none">
|
||||
<IconMessagesOff className='mx-auto mb-3'/>
|
||||
<span className='text-[12px] leading-normal'>{t('No conversations.')}</span>
|
||||
<span className='text-[12.5px] leading-3'>{t('No conversations.')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@ interface Props {
|
|||
export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
|
||||
return (
|
||||
<button
|
||||
className="flex w-full cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-white text-[12px] leading-normal transition-colors duration-200 hover:bg-gray-500/10 select-none"
|
||||
className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[12.5px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
|
||||
onClick={onClick}
|
||||
>
|
||||
<div>{icon}</div>
|
||||
<div>{text}</div>
|
||||
<span>{text}</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue