diff --git a/apps/web/src/components/ui/report/Editor.tsx b/apps/web/src/components/ui/report/Editor.tsx index 948f39b7a..b5ef1392e 100644 --- a/apps/web/src/components/ui/report/Editor.tsx +++ b/apps/web/src/components/ui/report/Editor.tsx @@ -12,7 +12,7 @@ const editorVariants = cva( cn( 'group/editor', 'relative w-full cursor-text overflow-x-visible break-words whitespace-pre-wrap select-text', - 'rounded-md ring-offset-background focus-visible:outline-none', + 'ring-offset-background focus-visible:outline-none', 'placeholder:text-muted-foreground/80 **:data-slate-placeholder:!top-1/2 **:data-slate-placeholder:-translate-y-1/2 **:data-slate-placeholder:text-muted-foreground/80 **:data-slate-placeholder:opacity-100!', '[&_strong]:font-bold' ), @@ -21,17 +21,16 @@ const editorVariants = cva( variant: 'default' }, variants: { - disabled: { - true: 'cursor-not-allowed opacity-50' + readOnly: { + true: '' }, focused: { true: 'ring-2 ring-ring ring-offset-2' }, variant: { - ai: 'w-full px-0 text-base md:text-sm', comment: cn('rounded-none border-none bg-transparent text-sm'), - default: 'size-full px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', - fullWidth: 'size-full px-16 pt-4 pb-72 text-base sm:px-24', + default: 'px-16 pt-4 pb-72 text-base sm:px-[max(64px,calc(50%-350px))]', + fullWidth: 'px-16 pt-4 pb-72 text-base sm:px-24', none: '' } } @@ -41,20 +40,20 @@ const editorVariants = cva( export type EditorProps = PlateContentProps & VariantProps; export const Editor = React.forwardRef( - ({ className, disabled, focused, variant, ...props }, ref) => { + ({ className, readOnly, focused, variant, ...props }, ref) => { return ( ); diff --git a/apps/web/src/components/ui/report/EditorContainer.tsx b/apps/web/src/components/ui/report/EditorContainer.tsx index c0a5fbcb6..d50a786dd 100644 --- a/apps/web/src/components/ui/report/EditorContainer.tsx +++ b/apps/web/src/components/ui/report/EditorContainer.tsx @@ -5,8 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'; interface EditorContainerProps { className?: string; variant?: 'default' | 'comment'; - readonly?: boolean; - disabled?: boolean; + readOnly?: boolean; } const editorContainerVariants = cva( @@ -27,13 +26,13 @@ const editorContainerVariants = cva( 'has-data-readonly:w-fit has-data-readonly:cursor-default has-data-readonly:border-transparent has-data-readonly:focus-within:[box-shadow:none]' ) }, - readonly: { - true: 'cursor-text' + readOnly: { + true: 'cursor-default user-select-none ' } }, defaultVariants: { variant: 'default', - readonly: false + readOnly: false } } ); @@ -41,8 +40,7 @@ const editorContainerVariants = cva( export function EditorContainer({ className, variant, - disabled, - readonly, + readOnly, ...props }: React.ComponentProps<'div'> & VariantProps & @@ -51,7 +49,7 @@ export function EditorContainer({ void; //markdown useFixedToolbarKit?: boolean; @@ -57,7 +56,6 @@ export const ReportEditor = React.memo( mode = 'default', useFixedToolbarKit = false, readOnly = false, - disabled = false, isStreaming = false, children }, @@ -66,15 +64,12 @@ export const ReportEditor = React.memo( // Initialize the editor instance using the custom useEditor hook const isReady = useRef(false); - // readOnly = true; - // isStreaming = true; - const editor = useReportEditor({ isStreaming, mode, + readOnly, value, initialElements, - disabled, useFixedToolbarKit }); @@ -123,22 +118,18 @@ export const ReportEditor = React.memo( if (!editor) return null; return ( - + + readOnly={readOnly} + className={cn('editor-container relative overflow-auto', containerClassName)}> {children} diff --git a/apps/web/src/components/ui/report/useReportEditor.tsx b/apps/web/src/components/ui/report/useReportEditor.tsx index b191c231d..403391314 100644 --- a/apps/web/src/components/ui/report/useReportEditor.tsx +++ b/apps/web/src/components/ui/report/useReportEditor.tsx @@ -13,15 +13,15 @@ import type { ReportElementWithId } from '@buster/server-shared/reports'; export const useReportEditor = ({ value, - disabled, isStreaming, mode = 'default', + readOnly, useFixedToolbarKit = false, initialElements }: { value: string | undefined; //markdown initialElements?: Value | ReportElementWithId[]; - disabled: boolean; + readOnly: boolean | undefined; useFixedToolbarKit?: boolean; isStreaming: boolean; mode?: 'export' | 'default'; @@ -43,7 +43,7 @@ export const useReportEditor = ({ const editor = usePlateEditor({ plugins, value: initialElements, - readOnly: disabled || isStreaming + readOnly: readOnly //this is for the initial value }); useEditorServerUpdates({ editor, value, isStreaming }); diff --git a/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx b/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx index 7120b5098..d7f1429d5 100644 --- a/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx +++ b/apps/web/src/controllers/ReportPageControllers/ReportPageController.tsx @@ -10,6 +10,7 @@ import { type IReportEditor } from '@/components/ui/report/ReportEditor'; import { ReportEditorSkeleton } from '@/components/ui/report/ReportEditorSkeleton'; import { useChatIndividualContextSelector } from '@/layouts/ChatLayout/ChatContext'; import { useTrackAndUpdateReportChanges } from '@/api/buster-electric/reports/hooks'; +import { useHotkeys } from 'react-hotkeys-hook'; export const ReportPageController: React.FC<{ reportId: string; @@ -20,11 +21,28 @@ export const ReportPageController: React.FC<{ }> = React.memo( ({ reportId, readOnly = false, className = '', onReady: onReadyProp, mode = 'default' }) => { const { data: report } = useGetReport({ reportId, versionNumber: undefined }); - const isStreamingMessage = useChatIndividualContextSelector((x) => x.isStreamingMessage); + let isStreamingMessage = useChatIndividualContextSelector((x) => x.isStreamingMessage); const content = report?.content || ''; const commonClassName = 'sm:px-[max(64px,calc(50%-350px))]'; + const [useOverride, setUseOverride] = React.useState(false); + + useHotkeys('x', () => { + setUseOverride((v) => { + console.log('x', !v); + return !v; + }); + }); + + if (useOverride) { + isStreamingMessage = true; + readOnly = true; + } else { + isStreamingMessage = false; + readOnly = false; + } + const { mutate: updateReport } = useUpdateReport(); const canUpdate = () => { @@ -59,7 +77,6 @@ export const ReportPageController: React.FC<{ edit.status === 'completed' || edit.status === 'failed' + ) ?? false; + + if (allEditsComplete) { + secondaryTitle = formatElapsedTime(state.startTime); + } } return {