mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 18:30:15 +01:00
style: update graphics (#1138)
* style: update new icon and NavLinks scale * style: new username update * refactor(Dropdown); style: general settings * style(Dropdown); adjust theme * style: dropdown and settings text * fix(Dropdown) system theme not working * style: topbar sticky; fix: general's menu settings transparent with light theme * fix(SubmitButton) stop generate button * fix: user_provided dialog for new dropdown * fix: TS error 'display' * fix(EditPresetDialog): for new dropdown * style: added green send button * converted textchat in tsx * style(SubmitButton): tooltip * test: fixed ThemeSelector and LangSelector * removed transition-opacity * fix all tests * removed empty cn call * chore: Update General.tsx to add Arabic option --------- Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
This commit is contained in:
Marco Beretta
GitHub
parent
8b28fdf240
commit
9ad47b6660
43 changed files with 442 additions and 318 deletions
|
|
@ -3,7 +3,7 @@ import type { TDialogProps } from '~/common';
|
|||
import { Dialog, Dropdown } from '~/components/ui';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { RevokeKeysButton } from '~/components/Nav';
|
||||
import { cn, defaultTextProps, removeFocusOutlines, alternateName } from '~/utils';
|
||||
import { cn, alternateName } from '~/utils';
|
||||
import { useUserKey, useLocalize } from '~/hooks';
|
||||
import GoogleConfig from './GoogleConfig';
|
||||
import OpenAIConfig from './OpenAIConfig';
|
||||
|
|
@ -75,13 +75,7 @@ const SetKeyDialog = ({
|
|||
value={expiresAtLabel}
|
||||
onChange={handleExpirationChange}
|
||||
options={expirationOptions.map((option) => option.display)}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
'flex h-full w-full resize-none',
|
||||
removeFocusOutlines,
|
||||
)}
|
||||
optionsClassName="max-h-72"
|
||||
containerClassName="flex w-1/2 md:w-1/3 resize-none z-[51]"
|
||||
width={185}
|
||||
/>
|
||||
<EndpointComponent userKey={userKey} setUserKey={setUserKey} endpoint={endpoint} />
|
||||
<HelpText endpoint={endpoint} />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@ import React, { useState, useEffect, useCallback } from 'react';
|
|||
import { StopGeneratingIcon } from '~/components';
|
||||
import { Settings } from 'lucide-react';
|
||||
import { SetKeyDialog } from './SetKeyDialog';
|
||||
import { useUserKey, useLocalize } from '~/hooks';
|
||||
import { useUserKey, useLocalize, useMediaQuery } from '~/hooks';
|
||||
import { SendMessageIcon } from '~/components/svg';
|
||||
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui/';
|
||||
|
||||
export default function SubmitButton({
|
||||
conversation,
|
||||
|
|
@ -11,6 +13,7 @@ export default function SubmitButton({
|
|||
disabled,
|
||||
isSubmitting,
|
||||
userProvidesKey,
|
||||
hasText,
|
||||
}) {
|
||||
const { endpoint } = conversation;
|
||||
const [isDialogOpen, setDialogOpen] = useState(false);
|
||||
|
|
@ -18,6 +21,16 @@ export default function SubmitButton({
|
|||
const [isKeyProvided, setKeyProvided] = useState(userProvidesKey ? checkExpiry() : true);
|
||||
const isKeyActive = checkExpiry();
|
||||
const localize = useLocalize();
|
||||
const dots = ['·', '··', '···'];
|
||||
const [dotIndex, setDotIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setDotIndex((prevDotIndex) => (prevDotIndex + 1) % dots.length);
|
||||
}, 500);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [dots.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (userProvidesKey) {
|
||||
|
|
@ -35,22 +48,43 @@ export default function SubmitButton({
|
|||
[submitMessage],
|
||||
);
|
||||
|
||||
const [isSquareGreen, setIsSquareGreen] = useState(false);
|
||||
|
||||
const setKey = useCallback(() => {
|
||||
setDialogOpen(true);
|
||||
}, []);
|
||||
|
||||
if (isSubmitting) {
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
|
||||
const iconContainerClass = `m-1 mr-0 rounded-md pb-[5px] pl-[6px] pr-[4px] pt-[5px] ${
|
||||
hasText ? (isSquareGreen ? 'bg-green-500' : '') : ''
|
||||
} group-hover:bg-19C37D group-disabled:hover:bg-transparent dark:${
|
||||
hasText ? (isSquareGreen ? 'bg-green-500' : '') : ''
|
||||
} dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent`;
|
||||
|
||||
useEffect(() => {
|
||||
setIsSquareGreen(hasText);
|
||||
}, [hasText]);
|
||||
|
||||
if (isSubmitting && isSmallScreen) {
|
||||
return (
|
||||
<button
|
||||
onClick={handleStopGenerating}
|
||||
type="button"
|
||||
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
|
||||
>
|
||||
<button onClick={handleStopGenerating} type="button">
|
||||
<div className="m-1 mr-0 rounded-md p-2 pb-[10px] pt-[10px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<StopGeneratingIcon />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
} else if (isSubmitting) {
|
||||
return (
|
||||
<div className="relative flex h-full">
|
||||
<div
|
||||
className="absolute text-2xl"
|
||||
style={{ top: '50%', transform: 'translateY(-20%) translateX(-33px)' }}
|
||||
>
|
||||
{dots[dotIndex]}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (!isKeyProvided) {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -73,34 +107,31 @@ export default function SubmitButton({
|
|||
);
|
||||
} else {
|
||||
return (
|
||||
<button
|
||||
onClick={clickHandler}
|
||||
disabled={disabled}
|
||||
data-testid="submit-button"
|
||||
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
|
||||
>
|
||||
<div className="m-1 mr-0 rounded-md pb-[9px] pl-[9.5px] pr-[7px] pt-[11px] group-hover:bg-gray-100 group-disabled:hover:bg-transparent dark:group-hover:bg-gray-900 dark:group-hover:text-gray-400 dark:group-disabled:hover:bg-transparent">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="mr-1 h-4 w-4 "
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line x1="22" y1="2" x2="11" y2="13" />
|
||||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<TooltipProvider delayDuration={50}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={clickHandler}
|
||||
disabled={disabled}
|
||||
data-testid="submit-button"
|
||||
className="group absolute bottom-0 right-0 z-[101] flex h-[100%] w-[50px] items-center justify-center bg-transparent p-1 text-gray-500"
|
||||
>
|
||||
<div className={iconContainerClass}>
|
||||
{hasText ? (
|
||||
<div className="bg-19C37D flex h-[24px] w-[24px] items-center justify-center rounded-full text-white">
|
||||
<SendMessageIcon />
|
||||
</div>
|
||||
) : (
|
||||
<SendMessageIcon />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" sideOffset={-5}>
|
||||
{localize('com_nav_send_message')}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
{
|
||||
/* <div class="text-2xl"><span class="">·</span><span class="">·</span><span class="invisible">·</span></div> */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import React, { useEffect, useContext, useRef } from 'react';
|
||||
import React, { useEffect, useContext, useRef, useState, useCallback } from 'react';
|
||||
import TextareaAutosize from 'react-textarea-autosize';
|
||||
import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil';
|
||||
import SubmitButton from './SubmitButton';
|
||||
|
||||
import OptionsBar from './OptionsBar';
|
||||
import { EndpointMenu } from './EndpointMenu';
|
||||
import Footer from './Footer';
|
||||
|
|
@ -9,7 +10,11 @@ import { useMessageHandler, ThemeContext } from '~/hooks';
|
|||
import { cn } from '~/utils';
|
||||
import store from '~/store';
|
||||
|
||||
export default function TextChat({ isSearchView = false }) {
|
||||
interface TextChatProps {
|
||||
isSearchView?: boolean;
|
||||
}
|
||||
|
||||
export default function TextChat({ isSearchView = false }: TextChatProps) {
|
||||
const { ask, isSubmitting, handleStopGenerating, latestMessage, endpointsConfig } =
|
||||
useMessageHandler();
|
||||
const conversation = useRecoilValue(store.conversation);
|
||||
|
|
@ -17,21 +22,22 @@ export default function TextChat({ isSearchView = false }) {
|
|||
const [text, setText] = useRecoilState(store.text);
|
||||
const { theme } = useContext(ThemeContext);
|
||||
const isComposing = useRef(false);
|
||||
const inputRef = useRef(null);
|
||||
const inputRef = useRef<HTMLTextAreaElement>(null);
|
||||
const [hasText, setHasText] = useState(false);
|
||||
|
||||
// TODO: do we need this?
|
||||
const disabled = false;
|
||||
|
||||
const isNotAppendable = latestMessage?.unfinished & !isSubmitting || latestMessage?.error;
|
||||
const isNotAppendable = (latestMessage?.unfinished && !isSubmitting) || latestMessage?.error;
|
||||
const { conversationId, jailbreak } = conversation || {};
|
||||
|
||||
// auto focus to input, when enter a conversation.
|
||||
// auto focus to input, when entering a conversation.
|
||||
useEffect(() => {
|
||||
if (!conversationId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevents Settings from not showing on new conversation, also prevents showing toneStyle change without jailbreak
|
||||
// Prevents Settings from not showing on a new conversation, also prevents showing toneStyle change without jailbreak
|
||||
if (conversationId === 'new' || !jailbreak) {
|
||||
setShowBingToneSetting(false);
|
||||
}
|
||||
|
|
@ -54,9 +60,10 @@ export default function TextChat({ isSearchView = false }) {
|
|||
const submitMessage = () => {
|
||||
ask({ text });
|
||||
setText('');
|
||||
setHasText(false);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter' && isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -70,9 +77,9 @@ export default function TextChat({ isSearchView = false }) {
|
|||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (e) => {
|
||||
if (e.keyCode === 8 && e.target.value.trim() === '') {
|
||||
setText(e.target.value);
|
||||
const handleKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (e.keyCode === 8 && e.currentTarget.value.trim() === '') {
|
||||
setText(e.currentTarget.value);
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' && e.shiftKey) {
|
||||
|
|
@ -92,12 +99,24 @@ export default function TextChat({ isSearchView = false }) {
|
|||
isComposing.current = false;
|
||||
};
|
||||
|
||||
const changeHandler = (e) => {
|
||||
const changeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const { value } = e.target;
|
||||
|
||||
setText(value);
|
||||
updateHasText(value);
|
||||
};
|
||||
|
||||
const updateHasText = useCallback(
|
||||
(text: string) => {
|
||||
setHasText(!!text.trim() || !!latestMessage?.error);
|
||||
},
|
||||
[setHasText, latestMessage],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
updateHasText(text);
|
||||
}, [text, latestMessage, updateHasText]);
|
||||
|
||||
const getPlaceholderText = () => {
|
||||
if (isSearchView) {
|
||||
return 'Click a message title to open its conversation.';
|
||||
|
|
@ -153,11 +172,11 @@ export default function TextChat({ isSearchView = false }) {
|
|||
<TextareaAutosize
|
||||
// set test id for e2e testing
|
||||
data-testid="text-input"
|
||||
tabIndex="0"
|
||||
tabIndex={0}
|
||||
autoFocus
|
||||
ref={inputRef}
|
||||
// style={{maxHeight: '200px', height: '24px', overflowY: 'hidden'}}
|
||||
rows="1"
|
||||
rows={1}
|
||||
value={disabled || isNotAppendable ? '' : text}
|
||||
onKeyUp={handleKeyUp}
|
||||
onKeyDown={handleKeyDown}
|
||||
|
|
@ -174,7 +193,12 @@ export default function TextChat({ isSearchView = false }) {
|
|||
handleStopGenerating={handleStopGenerating}
|
||||
disabled={disabled || isNotAppendable}
|
||||
isSubmitting={isSubmitting}
|
||||
userProvidesKey={endpointsConfig?.[conversation.endpoint]?.userProvide}
|
||||
userProvidesKey={
|
||||
conversation?.endpoint
|
||||
? endpointsConfig?.[conversation.endpoint]?.userProvide
|
||||
: undefined
|
||||
}
|
||||
hasText={hasText}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue