File size: 5,572 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | import { useMemo, memo } from 'react';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import supersub from 'remark-supersub';
import { useRecoilValue } from 'recoil';
import { EditIcon } from 'lucide-react';
import ReactMarkdown from 'react-markdown';
import rehypeHighlight from 'rehype-highlight';
import { SaveIcon, CrossIcon, TextareaAutosize } from '@librechat/client';
import { Controller, useFormContext, useFormState } from 'react-hook-form';
import type { PluggableList } from 'unified';
import { codeNoExecution } from '~/components/Chat/Messages/Content/MarkdownComponents';
import AlwaysMakeProd from '~/components/Prompts/Groups/AlwaysMakeProd';
import VariablesDropdown from './VariablesDropdown';
import { PromptVariableGfm } from './Markdown';
import { PromptsEditorMode } from '~/common';
import { cn, langSubset } from '~/utils';
import { useLocalize } from '~/hooks';
import store from '~/store';
const { promptsEditorMode } = store;
type Props = {
name: string;
isEditing: boolean;
setIsEditing: React.Dispatch<React.SetStateAction<boolean>>;
};
const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
const localize = useLocalize();
const { control } = useFormContext();
const editorMode = useRecoilValue(promptsEditorMode);
const { dirtyFields } = useFormState({ control: control });
const { prompt } = dirtyFields as { prompt?: string };
const EditorIcon = useMemo(() => {
if (isEditing && prompt?.length == null) {
return CrossIcon;
}
return isEditing ? SaveIcon : EditIcon;
}, [isEditing, prompt]);
const rehypePlugins: PluggableList = [
[rehypeKatex],
[
rehypeHighlight,
{
detect: true,
ignoreMissing: true,
subset: langSubset,
},
],
];
return (
<div className="flex max-h-[85vh] flex-col sm:max-h-[85vh]">
<h2 className="flex items-center justify-between rounded-t-xl border border-border-light py-1.5 pl-3 text-sm font-semibold text-text-primary sm:py-2 sm:pl-4 sm:text-base">
<span className="max-w-[200px] truncate sm:max-w-none">
{localize('com_ui_prompt_text')}
</span>
<div className="flex flex-shrink-0 flex-row items-center gap-3 sm:gap-6">
{editorMode === PromptsEditorMode.ADVANCED && (
<AlwaysMakeProd className="hidden sm:flex" />
)}
<VariablesDropdown fieldName={name} />
<button
type="button"
onClick={() => setIsEditing((prev) => !prev)}
aria-label={isEditing ? localize('com_ui_save') : localize('com_ui_edit')}
className="mr-1 rounded-lg p-1.5 sm:mr-2 sm:p-1"
>
<EditorIcon
className={cn(
'h-5 w-5 sm:h-6 sm:w-6',
isEditing ? 'p-[0.05rem]' : 'text-secondary-alt hover:text-text-primary',
)}
/>
</button>
</div>
</h2>
<div
role="button"
className={cn(
'w-full flex-1 overflow-auto rounded-b-xl border border-border-light p-2 shadow-md transition-all duration-150 sm:p-4',
{
'cursor-pointer bg-surface-primary hover:bg-surface-secondary active:bg-surface-tertiary':
!isEditing,
},
)}
onClick={() => !isEditing && setIsEditing(true)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
!isEditing && setIsEditing(true);
}
}}
tabIndex={0}
>
{!isEditing && (
<EditIcon className="icon-xl absolute inset-0 m-auto hidden h-6 w-6 text-text-primary opacity-25 group-hover:block sm:h-8 sm:w-8" />
)}
<Controller
name={name}
control={control}
render={({ field }) =>
isEditing ? (
<TextareaAutosize
{...field}
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus
className="w-full resize-none overflow-y-auto rounded bg-transparent text-sm text-text-primary focus:outline-none sm:text-base"
minRows={3}
maxRows={14}
onBlur={() => setIsEditing(false)}
onKeyDown={(e) => {
if (e.key === 'Escape') {
e.preventDefault();
setIsEditing(false);
}
}}
aria-label={localize('com_ui_prompt_input')}
/>
) : (
<div
className={cn('overflow-y-auto text-sm sm:text-base')}
style={{ minHeight: '4.5em', maxHeight: '21em', overflow: 'auto' }}
>
<ReactMarkdown
remarkPlugins={[
/** @ts-ignore */
supersub,
remarkGfm,
[remarkMath, { singleDollarTextMath: false }],
]}
/** @ts-ignore */
rehypePlugins={rehypePlugins}
/** @ts-ignore */
components={{ p: PromptVariableGfm, code: codeNoExecution }}
className="markdown prose dark:prose-invert light my-1 w-full break-words text-text-primary"
>
{field.value}
</ReactMarkdown>
</div>
)
}
/>
</div>
</div>
);
};
export default memo(PromptEditor);
|