Skip to content

Commit

Permalink
style: update graphics (danny-avila#1138)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@berry-13 @danny-avila
berry-13 and danny-avila authored Nov 16, 2023
1 parent 8b28fdf commit 9ad47b6
Show file tree
Hide file tree
Showing 43 changed files with 442 additions and 318 deletions.
9 changes: 2 additions & 7 deletions client/src/components/Endpoints/EditPresetDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,14 +91,9 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }: TEditP
</Label>
<Dropdown
value={endpoint || ''}
onChange={setOption('endpoint')}
onChange={(value) => setOption('endpoint')(value)}
options={availableEndpoints}
className={cn(
defaultTextProps,
'flex h-10 max-h-10 w-full resize-none ',
removeFocusOutlines,
)}
containerClassName="flex w-full resize-none z-[51]"
className={cn()}
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Endpoints/Settings/Anthropic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
setValue={setModel}
availableValues={models}
disabled={readonly}
className={cn(defaultTextProps, 'z-50 flex w-full resize-none', removeFocusOutlines)}
className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
containerClassName="flex w-full resize-none"
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Endpoints/Settings/Google.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
setValue={setModel}
availableValues={models}
disabled={readonly}
className={cn(defaultTextProps, 'z-50 flex w-full resize-none', removeFocusOutlines)}
className={cn(defaultTextProps, 'flex w-full resize-none', removeFocusOutlines)}
containerClassName="flex w-full resize-none"
/>
</div>
Expand Down
10 changes: 2 additions & 8 deletions client/src/components/Input/SetKeyDialog/SetKeyDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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} />
Expand Down
101 changes: 66 additions & 35 deletions client/src/components/Input/SubmitButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -11,13 +13,24 @@ export default function SubmitButton({
disabled,
isSubmitting,
userProvidesKey,
hasText,
}) {
const { endpoint } = conversation;
const [isDialogOpen, setDialogOpen] = useState(false);
const { checkExpiry } = useUserKey(endpoint);
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) {
Expand All @@ -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 (
<>
Expand All @@ -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> */
}
52 changes: 38 additions & 14 deletions client/src/components/Input/TextChat.jsx → client/src/components/Input/TextChat.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,43 @@
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';
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);
const setShowBingToneSetting = useSetRecoilState(store.showBingToneSetting);
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);
}
Expand All @@ -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;
}
Expand All @@ -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) {
Expand All @@ -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.';
Expand Down Expand Up @@ -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}
Expand All @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions client/src/components/Messages/MessageHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,9 @@ const MessageHeader = ({ isSearchView = false }) => {
<>
<div
className={cn(
'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 hover:bg-opacity-30 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:bg-opacity-100',
isNotClickable ? '' : 'cursor-pointer ',
'flex min-h-[60px] w-full flex-wrap items-center justify-between gap-3 border-b border-black/10 bg-white text-sm text-gray-500 transition-all hover:bg-gray-50 dark:border-gray-900/50 dark:bg-gray-800 dark:hover:bg-gray-700',
isNotClickable ? '' : 'cursor-pointer',
'sticky top-0 z-10',
)}
onClick={() => (isNotClickable ? null : setSaveAsDialogShow(true))}
>
Expand Down
2 changes: 1 addition & 1 deletion client/src/components/Nav/Nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export default function Nav({ navVisible, setNavVisible }) {
</div>
</div>
{!navVisible && (
<div className="absolute left-2 top-2 z-10 hidden md:inline-block">
<div className="absolute left-2 top-2 z-20 hidden md:inline-block">
<TooltipTrigger asChild>
<button
type="button"
Expand Down
16 changes: 11 additions & 5 deletions client/src/components/Nav/NavLinks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function NavLinks() {
)}
<Menu.Button
className={cn(
'group-ui-open:bg-gray-800 flex w-full items-center gap-2.5 rounded-md px-3 py-3 text-sm transition-colors duration-200 hover:bg-gray-800',
'group-ui-open:bg-gray-800 rounded-sd flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors duration-200 hover:bg-gray-800',
open ? 'bg-gray-800' : '',
)}
data-testid="nav-user"
Expand All @@ -69,18 +69,24 @@ export default function NavLinks() {
/>
</div>
</div>
<div className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-white">
<div
className="grow overflow-hidden text-ellipsis whitespace-nowrap text-left font-bold text-white"
style={{ marginTop: '-4px', marginLeft: '2px' }}
>
{user?.name || localize('com_nav_user')}
</div>
<DotsIcon />

<div style={{ marginBottom: '5px' }}>
<DotsIcon />
</div>
</Menu.Button>

<Transition
as={Fragment}
enter="transition ease-out duration-100 transform"
enter="transition ease-out duration-110 transform"
enterFrom="translate-y-2 opacity-0"
enterTo="translate-y-0 opacity-100"
leave="transition ease-in duration-75 transform"
leave="transition ease-in duration-100 transform"
leaveFrom="translate-y-0 opacity-100"
leaveTo="translate-y-2 opacity-0"
>
Expand Down
Loading

0 comments on commit 9ad47b6

Please sign in to comment.