From e6dd1f0c489d4ba2f03d5a3125145a4017666674 Mon Sep 17 00:00:00 2001 From: Enrico Ros Date: Thu, 23 Jan 2025 09:54:18 -0800 Subject: [PATCH] Inline Thinking Fragments --- .../chat/components/message/ChatMessage.tsx | 2 +- .../fragments-content/BlockPartModelAux.tsx | 91 ++++++++++++++++--- .../fragments-content/ContentFragments.tsx | 5 +- .../layout/overlays/store-layout-overlays.ts | 1 + 4 files changed, 82 insertions(+), 17 deletions(-) diff --git a/src/apps/chat/components/message/ChatMessage.tsx b/src/apps/chat/components/message/ChatMessage.tsx index 4f8bd58cc8..2ea6ee7a7c 100644 --- a/src/apps/chat/components/message/ChatMessage.tsx +++ b/src/apps/chat/components/message/ChatMessage.tsx @@ -727,7 +727,7 @@ export function ChatMessage(props: { onFragmentBlank={handleFragmentNew} onFragmentDelete={handleFragmentDelete} - onFragmentReplace={handleFragmentReplace} + onFragmentReplace={!props.onMessageFragmentReplace ? undefined : handleFragmentReplace} onMessageDelete={props.onMessageDelete ? handleOpsDelete : undefined} onContextMenu={(props.onMessageFragmentReplace && ENABLE_CONTEXT_MENU) ? handleBlocksContextMenu : undefined} diff --git a/src/apps/chat/components/message/fragments-content/BlockPartModelAux.tsx b/src/apps/chat/components/message/fragments-content/BlockPartModelAux.tsx index d4f722dc91..70e66927df 100644 --- a/src/apps/chat/components/message/fragments-content/BlockPartModelAux.tsx +++ b/src/apps/chat/components/message/fragments-content/BlockPartModelAux.tsx @@ -1,11 +1,16 @@ import * as React from 'react'; import { Box, Chip, Typography } from '@mui/joy'; +import AllInclusiveIcon from '@mui/icons-material/AllInclusive'; +import TextFieldsIcon from '@mui/icons-material/TextFields'; + import { useScaledTypographySx } from '~/modules/blocks/blocks.styles'; +import { ConfirmationModal } from '~/common/components/modals/ConfirmationModal'; import { ExpanderControlledBox } from '~/common/components/ExpanderControlledBox'; import { adjustContentScaling, ContentScaling } from '~/common/app.theme'; -import { useUIComplexityIsMinimal } from '~/common/state/store-ui'; +import { createTextContentFragment, DMessageContentFragment, DMessageFragmentId } from '~/common/stores/chat/chat.fragments'; +import { useOverlayComponents } from '~/common/layout/overlays/useOverlayComponents'; const _styles = { @@ -15,8 +20,14 @@ const _styles = { } as const, chip: { - px: 1, - py: 0.25, + px: 1.5, + py: 0.375, + boxShadow: '0px 2px 4px -2px rgba(0, 0, 0, 0.25)', + } as const, + + chipExpanded: { + px: 1.5, + py: 0.375, } as const, text: { @@ -29,29 +40,64 @@ const _styles = { // plain text style overflowWrap: 'anywhere', whiteSpace: 'break-spaces', + + // layout + display: 'flex', + flexDirection: 'column', + } as const, + + buttonInline: { + outline: 'none', + // borderRadius: 'sm', + // fontSize: 'xs', } as const, } as const; export function BlockPartModelAux(props: { + fragmentId: DMessageFragmentId, auxType: 'reasoning' | string, auxText: string, + zenMode: boolean, contentScaling: ContentScaling, + onFragmentReplace?: (fragmentId: DMessageFragmentId, newFragment: DMessageContentFragment) => void, }) { // state const [expanded, setExpanded] = React.useState(false); // external state - const zenMode = useUIComplexityIsMinimal(); + const { showPromisedOverlay } = useOverlayComponents(); // memo const scaledTypographySx = useScaledTypographySx(adjustContentScaling(props.contentScaling, -1), false, false); const textSx = React.useMemo(() => ({ ..._styles.text, ...scaledTypographySx }), [scaledTypographySx]); - let typeText = props.auxType === 'reasoning' ? 'Show Reasoning' : 'Show Auxiliary'; - if (!zenMode && props.auxType === 'reasoning') - typeText = '🧠 ' + typeText; + let typeText = props.auxType === 'reasoning' ? 'Thought Process' : 'Auxiliary'; + + + // handlers + + const { onFragmentReplace } = props; + const showInline = !!onFragmentReplace; + + const handleInline = React.useCallback(() => { + if (!onFragmentReplace) return; + showPromisedOverlay('chat-message-inline-aux', {}, ({ onResolve, onUserReject }) => + onResolve(true)} + confirmationText={<> + Convert this {typeText.toLowerCase()} into regular message text? +
+ It will become part of the message and can't be collapsed again. + } + positiveActionText='Convert' + />, + ).then(() => { + onFragmentReplace(props.fragmentId, createTextContentFragment(props.auxText)); + }).catch(() => null /* ignore closure */); + }, [onFragmentReplace, props.auxText, props.fragmentId, showPromisedOverlay, typeText]); + // create up to 3 dots '.' based on the length of the auxText (1 dot per 100 characters) // const dots = '.'.repeat(Math.floor(props.auxText.length / 100) % 5); @@ -59,14 +105,29 @@ export function BlockPartModelAux(props: { return {/* Chip to expand/collapse */} - setExpanded(on => !on)} - sx={_styles.chip} - > - {typeText} - + + setExpanded(on => !on)} + sx={expanded ? _styles.chipExpanded : _styles.chip} + startDecorator={} + > + {expanded ? '' : <> Show }{typeText} + + + {expanded && showInline && ( + } + sx={_styles.chipExpanded} + > + Make Regular Text + + )} + {/* Controlled Box */} diff --git a/src/apps/chat/components/message/fragments-content/ContentFragments.tsx b/src/apps/chat/components/message/fragments-content/ContentFragments.tsx index c23d6b2e04..b95371caf2 100644 --- a/src/apps/chat/components/message/fragments-content/ContentFragments.tsx +++ b/src/apps/chat/components/message/fragments-content/ContentFragments.tsx @@ -64,7 +64,7 @@ export function ContentFragments(props: { onFragmentBlank: () => void onFragmentDelete: (fragmentId: DMessageFragmentId) => void, - onFragmentReplace: (fragmentId: DMessageFragmentId, newFragment: DMessageContentFragment) => void, + onFragmentReplace?: (fragmentId: DMessageFragmentId, newFragment: DMessageContentFragment) => void, onMessageDelete?: () => void, onContextMenu?: (event: React.MouseEvent) => void; @@ -116,9 +116,12 @@ export function ContentFragments(props: { return ( ); } diff --git a/src/common/layout/overlays/store-layout-overlays.ts b/src/common/layout/overlays/store-layout-overlays.ts index cd1891ffe3..92a8214c3c 100644 --- a/src/common/layout/overlays/store-layout-overlays.ts +++ b/src/common/layout/overlays/store-layout-overlays.ts @@ -21,6 +21,7 @@ export type GlobalOverlayId = // string - disabled so we keep an orderliness | 'chat-delete-confirmation' | 'chat-reset-confirmation' | 'chat-message-delete-confirmation' + | 'chat-message-inline-aux' | 'livefile-overwrite' | 'shortcuts-confirm-close' | 'blocks-off-enhance-code'