From d066aba00e7f787894c37e673d2fe302d2ef64fe Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Wed, 7 Aug 2024 01:45:09 -0700 Subject: [PATCH] Style cleanups. --- .../chat/components/composer/Composer.tsx | 4 +- .../llmattachments/LLMAttachmentsList.tsx | 2 +- .../LLMAttachmentsPromptsButton.tsx | 27 ++++++++----- .../textarea/ComposerTextAreaActions.tsx | 39 ++++++++++++------- .../chat/components/message/ChatMessage.tsx | 1 - src/common/styles/agi.effects.css | 2 +- .../useAgiAttachmentPrompts.tsx | 19 ++++++--- 7 files changed, 59 insertions(+), 35 deletions(-) diff --git a/src/apps/chat/components/composer/Composer.tsx b/src/apps/chat/components/composer/Composer.tsx index e130e4396..b2530f199 100644 --- a/src/apps/chat/components/composer/Composer.tsx +++ b/src/apps/chat/components/composer/Composer.tsx @@ -662,7 +662,7 @@ export function Composer(props: { variant='outlined' color={isDraw ? 'warning' : isReAct ? 'success' : undefined} autoFocus - minRows={isMobile ? 4 : showChatInReferenceTo ? 4 : 5} + minRows={isMobile ? 4 : agiAttachmentPrompts.hasData ? 3 : showChatInReferenceTo ? 4 : 5} maxRows={isMobile ? 8 : 10} placeholder={textPlaceholder} value={composeText} @@ -691,7 +691,7 @@ export function Composer(props: { }} sx={{ backgroundColor: 'background.level1', - '&:focus-within': { backgroundColor: 'background.popup', '.in-reference-to-bubble': { backgroundColor: 'background.popup' } }, + '&:focus-within': { backgroundColor: 'background.popup', '.within-composer-focus': { backgroundColor: 'background.popup' } }, lineHeight: lineHeightTextareaMd, }} /> diff --git a/src/apps/chat/components/composer/llmattachments/LLMAttachmentsList.tsx b/src/apps/chat/components/composer/llmattachments/LLMAttachmentsList.tsx index 3eaba912d..3b6aabe55 100644 --- a/src/apps/chat/components/composer/llmattachments/LLMAttachmentsList.tsx +++ b/src/apps/chat/components/composer/llmattachments/LLMAttachmentsList.tsx @@ -117,7 +117,7 @@ export function LLMAttachmentsList(props: { {/* Horizontally scrollable */} - + {/* AI Suggestion Button */} {(agiAttachmentPrompts.isVisible || agiAttachmentPrompts.hasData) && ( diff --git a/src/apps/chat/components/composer/llmattachments/LLMAttachmentsPromptsButton.tsx b/src/apps/chat/components/composer/llmattachments/LLMAttachmentsPromptsButton.tsx index 06af9f2c6..523ec3d74 100644 --- a/src/apps/chat/components/composer/llmattachments/LLMAttachmentsPromptsButton.tsx +++ b/src/apps/chat/components/composer/llmattachments/LLMAttachmentsPromptsButton.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; -import { CircularProgress, IconButton, Tooltip } from '@mui/joy'; +import type { SxProps } from '@mui/joy/styles/types'; +import { Box, CircularProgress, IconButton, Tooltip } from '@mui/joy'; import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'; import type { AgiAttachmentPromptsData } from '~/modules/aifn/attachmentprompts/useAgiAttachmentPrompts'; -import { SxProps } from '@mui/joy/styles/types'; + +import { AgiSquircleIcon } from '~/common/components/icons/AgiSquircleIcon'; + import { AGI_SUGGESTIONS_COLOR } from '../textarea/ComposerTextAreaActions'; @@ -12,21 +15,26 @@ export const LLMAttachmentsPromptsButtonMemo = React.memo(LLMAttachmentsPromptsB const promptGenIconButtonSx: SxProps = { - minWidth: 40, + // minWidth: 40, backgroundColor: 'background.level1', boxShadow: `inset 0 4px 6px -4px rgb(var(--joy-palette-${AGI_SUGGESTIONS_COLOR}-darkChannel) / 40%)`, borderRadius: '2rem', borderBottomLeftRadius: 0, - borderColor: `${AGI_SUGGESTIONS_COLOR}.outlinedColor`, + // borderColor: `${AGI_SUGGESTIONS_COLOR}.outlinedBorder`, // '&:hover': { // backgroundColor: 'background.level1', // }, + '&:hover': { + backgroundColor: `${AGI_SUGGESTIONS_COLOR}.solidBg`, + borderColor: `${AGI_SUGGESTIONS_COLOR}.solidBg`, + color: `${AGI_SUGGESTIONS_COLOR}.solidColor`, + }, }; const brightenSx: SxProps = { ...promptGenIconButtonSx, backgroundColor: 'background.popup', - boxShadow: undefined, + boxShadow: 'xs', }; function LLMAttachmentsPromptsButton({ data }: { data: AgiAttachmentPromptsData }) { @@ -34,8 +42,8 @@ function LLMAttachmentsPromptsButton({ data }: { data: AgiAttachmentPromptsData const tooltipTitle = data.error ? (data.error.message || 'Error guessing actions') : data.isFetching ? null - : data.isPending ? 'What to do?' - : 'Guess more'; + : data.isPending ? What to do? + : 'Give me more ideas'; const button = ( {data.isFetching ? ( @@ -55,7 +64,7 @@ function LLMAttachmentsPromptsButton({ data }: { data: AgiAttachmentPromptsData ); return !tooltipTitle ? button : ( - + {button} ); diff --git a/src/apps/chat/components/composer/textarea/ComposerTextAreaActions.tsx b/src/apps/chat/components/composer/textarea/ComposerTextAreaActions.tsx index f442f5276..db5a75b86 100644 --- a/src/apps/chat/components/composer/textarea/ComposerTextAreaActions.tsx +++ b/src/apps/chat/components/composer/textarea/ComposerTextAreaActions.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import type { SxProps } from '@mui/joy/styles/types'; -import { Box, ColorPaletteProp, Sheet } from '@mui/joy'; +import { Box, Button, ColorPaletteProp } from '@mui/joy'; import type { AgiAttachmentPromptsData } from '~/modules/aifn/attachmentprompts/useAgiAttachmentPrompts'; @@ -11,20 +11,18 @@ import { InReferenceToBubble } from '../../message/InReferenceToBubble'; // configuration -export const AGI_SUGGESTIONS_COLOR: ColorPaletteProp = 'primary'; +export const AGI_SUGGESTIONS_COLOR: ColorPaletteProp = 'success'; // Styles const textAreaSx: SxProps = { flex: 1, - // marginBottom: 0.5, - // margin: 1, - // marginTop: 0, // layout display: 'grid', justifyItems: 'start', - gap: 1, + gap: 0.5, + mb: 0.625, // Buttons [`& button`]: { @@ -35,21 +33,31 @@ const textAreaSx: SxProps = { }; -const suggestedPromptSx: SxProps = { +const promptButtonSx: SxProps = { + minHeight: '2rem', placeSelf: 'start', - // width: '100%', + + color: `${AGI_SUGGESTIONS_COLOR}.softActiveColor`, backgroundColor: 'background.surface', border: '1px solid', - borderColor: `${AGI_SUGGESTIONS_COLOR}.outlinedColor`, + borderColor: `${AGI_SUGGESTIONS_COLOR}.outlinedBorder`, borderRadius: '1rem', borderBottomLeftRadius: 0, - px: 1.5, + boxShadow: 'xs', + pl: 1.5, + pr: 2, py: 0.5, fontSize: 'sm', + fontWeight: 'normal', cursor: 'pointer', + transition: 'none', + textAlign: 'start', + // whiteSpace: 'balance', '&:hover': { backgroundColor: `${AGI_SUGGESTIONS_COLOR}.solidBg`, + borderColor: `${AGI_SUGGESTIONS_COLOR}.solidBg`, color: `${AGI_SUGGESTIONS_COLOR}.solidColor`, + transition: 'none', }, }; @@ -75,21 +83,22 @@ export function ComposerTextAreaActions(props: { key={index} item={item} onRemove={props.onRemoveReferenceTo} - className='in-reference-to-bubble' + className='within-composer-focus' /> ))} {/* Auto-Prompts from attachments */} {agiAttachmentPrompts.prompts.map((candidate, index) => - props.onAppendAndSend(candidate)} - sx={suggestedPromptSx} + className='within-composer-focus' + sx={promptButtonSx} > {candidate} - , + , )} {/* Guess Action Button */} diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx index f2a11e121..f397cf589 100644 --- a/src/apps/chat/components/message/ChatMessage.tsx +++ b/src/apps/chat/components/message/ChatMessage.tsx @@ -581,7 +581,6 @@ export function ChatMessage(props: { key={'irt-' + index} item={item} bubbleVariant='message' - className='in-reference-to-bubble' /> ))} diff --git a/src/common/styles/agi.effects.css b/src/common/styles/agi.effects.css index d1e4ff071..121bd0f80 100644 --- a/src/common/styles/agi.effects.css +++ b/src/common/styles/agi.effects.css @@ -27,7 +27,7 @@ .agi-border-4 > * { clip-path: inset(var(--border-width)); border-radius: var(--border-radius); - opacity: 0.92; + opacity: 0.94; } .agi-border-4::before { diff --git a/src/modules/aifn/attachmentprompts/useAgiAttachmentPrompts.tsx b/src/modules/aifn/attachmentprompts/useAgiAttachmentPrompts.tsx index fa1cf9845..32037c846 100644 --- a/src/modules/aifn/attachmentprompts/useAgiAttachmentPrompts.tsx +++ b/src/modules/aifn/attachmentprompts/useAgiAttachmentPrompts.tsx @@ -17,6 +17,7 @@ export interface AgiAttachmentPromptsData { isFetching: boolean; isPending: boolean; refetch: () => Promise; + clear: () => void; } const noPrompts: string[] = []; @@ -24,6 +25,7 @@ const noPrompts: string[] = []; export function useAgiAttachmentPrompts(canAutoTrigger: boolean, attachmentDrafts: AttachmentDraft[]): AgiAttachmentPromptsData { // state + const [isCleared, setIsCleared] = React.useState(false); const [alreadyRan, setAlreadyRan] = React.useState(false); // derived @@ -35,14 +37,18 @@ export function useAgiAttachmentPrompts(canAutoTrigger: boolean, attachmentDraft const { data, error, isPending, isFetching, refetch } = useQuery({ enabled: canAutoTrigger && hasEnoughInput && !alreadyRan, queryKey: ['aifn-prompts-attachments', ...fragments.map(f => f.fId).sort()], - queryFn: async ({ signal }) => agiAttachmentPrompts(fragments, signal), + queryFn: async ({ signal }) => { + const data = await agiAttachmentPrompts(fragments, signal); + setIsCleared(false); + return data; + }, staleTime: 1000 * 60 * 10, // 10 minutes // placeholderData: inputCount ? keepPreviousData : undefined, }); - React.useEffect(() => { - console.log('refetch diff'); - }, [refetch]); + const clear = React.useCallback(() => { + setIsCleared(true); + }, []); // derived state const isVisible = hasEnoughInput; @@ -58,11 +64,12 @@ export function useAgiAttachmentPrompts(canAutoTrigger: boolean, attachmentDraft return useShallowStable({ isVisible, - hasData, - prompts: data || noPrompts, + hasData: hasData && !isCleared, + prompts: isCleared ? noPrompts : data || noPrompts, error, isFetching, isPending, refetch, + clear, }); }