F: Prompt editor component pt1

This commit is contained in:
Ivan 2025-07-22 14:52:03 +03:00
parent 20d95f42dc
commit 78964b23cc
13 changed files with 321 additions and 73 deletions

View File

@ -4,7 +4,7 @@
"version": "1.0.0",
"type": "module",
"scripts": {
"generate": "lezer-generator src/features/rsform/components/rs-input/rslang/rslang-fast.grammar -o src/features/rsform/components/rs-input/rslang/parser.ts && lezer-generator src/features/rsform/components/rs-input/rslang/rslang-ast.grammar -o src/features/rsform/components/rs-input/rslang/parser-ast.ts && lezer-generator src/features/rsform/components/refs-input/parse/refs-text.grammar -o src/features/rsform/components/refs-input/parse/parser.ts",
"generate": "lezer-generator src/features/rsform/components/rs-input/rslang/rslang-fast.grammar -o src/features/rsform/components/rs-input/rslang/parser.ts && lezer-generator src/features/rsform/components/rs-input/rslang/rslang-ast.grammar -o src/features/rsform/components/rs-input/rslang/parser-ast.ts && lezer-generator src/features/rsform/components/refs-input/parse/refs-text.grammar -o src/features/rsform/components/refs-input/parse/parser.ts && lezer-generator src/features/ai/components/prompt-input/parse/prompt-text.grammar -o src/features/ai/components/prompt-input/parse/parser.ts",
"test": "jest",
"test:e2e": "playwright test",
"dev": "vite --host",

View File

@ -0,0 +1 @@
export { PromptInput } from './prompt-input';

View File

@ -0,0 +1,6 @@
import { styleTags, tags } from '@lezer/highlight';
export const highlighting = styleTags({
Variable: tags.name,
Error: tags.comment
});

View File

@ -0,0 +1,8 @@
import { LRLanguage } from '@codemirror/language';
import { parser } from './parser';
export const PromptLanguage = LRLanguage.define({
parser: parser,
languageData: {}
});

View File

@ -0,0 +1,6 @@
// This file was generated by lezer-generator. You probably shouldn't edit it.
export const
Text = 1,
Variable = 2,
Error = 3,
Filler = 4

View File

@ -0,0 +1,30 @@
import { printTree } from '@/utils/codemirror';
import { parser } from './parser';
const testData = [
['', '[Text]'],
['тест русский', '[Text[Filler]]'],
['test english', '[Text[Filler]]'],
['test greek σσσ', '[Text[Filler]]'],
['X1 раз два X2', '[Text[Filler]]'],
['{{variable}}', '[Text[Variable]]'],
['{{var_1}}', '[Text[Variable]]'],
['{{user.name}}', '[Text[Variable]]'],
['!error!', '[Text[Error]]'],
['word !error! word', '[Text[Filler Error Filler]]'],
['{{variable}} !error! word', '[Text[Variable Error Filler]]'],
['word {{variable}}', '[Text[Filler Variable]]'],
['word {{variable}} !error!', '[Text[Filler Variable Error]]'],
['{{variable}} word', '[Text[Variable Filler]]'],
['!err! {{variable}}', '[Text[Error Variable]]'],
['!err! {{variable}} word', '[Text[Error Variable Filler]]']
] as const;
/** Test prompt grammar parser with various prompt inputs */
describe('Prompt grammar parser', () => {
it.each(testData)('Parse %p', (input: string, expectedTree: string) => {
const tree = parser.parse(input);
expect(printTree(tree)).toBe(expectedTree);
});
});

View File

@ -0,0 +1,18 @@
// This file was generated by lezer-generator. You probably shouldn't edit it.
import {LRParser} from "@lezer/lr"
import {highlighting} from "./highlight"
export const parser = LRParser.deserialize({
version: 14,
states: "!vQVQPOOObQPO'#C^OgQPO'#CjO]QPO'#C_OOQO'#C`'#C`OOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOuQPO,58xOOQO,59U,59UOzQPO,58yOOQO-E6_-E6_OOQO1G.d1G.dOOQO1G.e1G.e",
stateData: "!U~OWOS~OZPO]RO_QO~O[WO~O_QOU^XZ^X]^X~OY[O~O]]O~O[_W_~",
goto: "x_PP```dPPPjPPPPnTTOVQVORZVTUOVSSOVQXQRYR",
nodeNames: "⚠ Text Variable Error Filler",
maxTerm: 15,
propSources: [highlighting],
skippedNodes: [0],
repeatNodeCount: 1,
tokenData: ")O~RrOX#]XZ$QZ^$u^p#]pq$Qqr&qr!O#]!P!b#]!c!}&v!}#R#]#R#S&v#S#T#]#T#o&v#o#p(h#q#r(s#r#y#]#y#z$u#z$f#]$f$g$u$g#BY#]#BY#BZ$u#BZ$IS#]$IS$I_$u$I_$I|#]$I|$JO$u$JO$JT#]$JT$JU$u$JU$KV#]$KV$KW$u$KW&FU#]&FU&FV$u&FV;'S#];'S;=`#z<%lO#]~#bW_~OX#]Zp#]r!O#]!P!b#]!c#o#]#r;'S#];'S;=`#z<%lO#]~#}P;=`<%l#]~$VYW~X^$Qpq$Q#y#z$Q$f$g$Q#BY#BZ$Q$IS$I_$Q$I|$JO$Q$JT$JU$Q$KV$KW$Q&FU&FV$Q~$|k_~W~OX#]XZ$QZ^$u^p#]pq$Qr!O#]!P!b#]!c#o#]#r#y#]#y#z$u#z$f#]$f$g$u$g#BY#]#BY#BZ$u#BZ$IS#]$IS$I_$u$I_$I|#]$I|$JO$u$JO$JT#]$JT$JU$u$JU$KV#]$KV$KW$u$KW&FU#]&FU&FV$u&FV;'S#];'S;=`#z<%lO#]~&vO]~~&}`[~_~OX#]Zp#]r}#]}!O&v!O!P(P!P!Q#]!Q![&v![!b#]!c!}&v!}#R#]#R#S&v#S#T#]#T#o&v#r;'S#];'S;=`#z<%lO#]~(UU[~}!O(P!O!P(P!Q![(P!c!}(P#R#S(P#T#o(P~(kP#o#p(n~(sOZ~~(vP#q#r(y~)OOY~",
tokenizers: [0],
topRules: {"Text":[0,1]},
tokenPrec: 47
})

View File

@ -0,0 +1,39 @@
@precedence {
text @right
p1
p2
p3
}
@top Text { textItem* }
@skip { space }
@tokens {
space { @whitespace+ }
variable { $[a-zA-Z_]$[a-zA-Z0-9_.-]* }
word { ![@{|}!.\t\n ]+ }
@precedence { variable, word, space }
}
textItem {
!p1 Variable |
!p2 Error |
!p3 Filler
}
Filler { word_enum }
Error { "!" word_enum "!" }
word_enum {
word |
word !text word_enum
}
Variable {
"{{" variable "}}"
}
@detectDelim
@external propSource highlighting from "./highlight"

View File

@ -0,0 +1,143 @@
'use client';
import { forwardRef, useRef } from 'react';
import { type Extension } from '@codemirror/state';
import { tags } from '@lezer/highlight';
import { createTheme } from '@uiw/codemirror-themes';
import CodeMirror, {
type BasicSetupOptions,
type ReactCodeMirrorProps,
type ReactCodeMirrorRef
} from '@uiw/react-codemirror';
import clsx from 'clsx';
import { EditorView } from 'codemirror';
import { Label } from '@/components/input';
import { usePreferencesStore } from '@/stores/preferences';
import { APP_COLORS } from '@/styling/colors';
import { notImplemented } from '@/utils/utils';
import { useAvailableVariables } from '../../stores/use-available-variables';
import { PromptLanguage } from './parse';
const EDITOR_OPTIONS: BasicSetupOptions = {
highlightSpecialChars: false,
history: true,
drawSelection: false,
syntaxHighlighting: false,
defaultKeymap: true,
historyKeymap: true,
lineNumbers: false,
highlightActiveLineGutter: false,
foldGutter: false,
dropCursor: true,
allowMultipleSelections: false,
indentOnInput: false,
bracketMatching: false,
closeBrackets: false,
autocompletion: false,
rectangularSelection: false,
crosshairCursor: false,
highlightActiveLine: false,
highlightSelectionMatches: false,
closeBracketsKeymap: false,
searchKeymap: false,
foldKeymap: false,
completionKeymap: false,
lintKeymap: false
};
interface PromptInputProps
extends Pick<
ReactCodeMirrorProps,
| 'id' //
| 'height'
| 'minHeight'
| 'maxHeight'
| 'value'
| 'onFocus'
| 'onBlur'
| 'placeholder'
| 'style'
| 'className'
> {
value: string;
onChange: (newValue: string) => void;
label?: string;
disabled?: boolean;
initialValue?: string;
}
export const PromptInput = forwardRef<ReactCodeMirrorRef, PromptInputProps>(
(
{
id, //
label,
disabled,
onChange,
...restProps
},
ref
) => {
const darkMode = usePreferencesStore(state => state.darkMode);
const availableVariables = useAvailableVariables();
console.log(availableVariables);
const internalRef = useRef<ReactCodeMirrorRef>(null);
const thisRef = !ref || typeof ref === 'function' ? internalRef : ref;
const cursor = !disabled ? 'cursor-text' : 'cursor-default';
const customTheme: Extension = createTheme({
theme: darkMode ? 'dark' : 'light',
settings: {
fontFamily: 'inherit',
background: !disabled ? APP_COLORS.bgInput : APP_COLORS.bgDefault,
foreground: APP_COLORS.fgDefault,
caret: APP_COLORS.fgDefault
},
styles: [
{ tag: tags.name, color: APP_COLORS.fgPurple, cursor: 'default' }, // Variable
{ tag: tags.comment, color: APP_COLORS.fgRed } // Error
]
});
const editorExtensions = [
EditorView.lineWrapping,
EditorView.contentAttributes.of({ spellcheck: 'true' }),
PromptLanguage
];
function handleInput(event: React.KeyboardEvent<HTMLDivElement>) {
if (!thisRef.current?.view) {
event.preventDefault();
event.stopPropagation();
return;
}
if ((event.ctrlKey || event.metaKey) && event.code === 'Space') {
notImplemented();
return;
}
}
return (
<div className={clsx('flex flex-col gap-2', cursor)}>
<Label text={label} />
<CodeMirror
id={id}
ref={thisRef}
basicSetup={EDITOR_OPTIONS}
theme={customTheme}
extensions={editorExtensions}
indentWithTab={false}
onChange={onChange}
editable={!disabled}
onKeyDown={handleInput}
{...restProps}
/>
</div>
);
}
);

View File

@ -1,6 +1,5 @@
// This file was generated by lezer-generator. You probably shouldn't edit it.
export const
Text = 1,
export const Text = 1,
RefEntity = 2,
Global = 3,
Grams = 4,
@ -8,4 +7,4 @@ export const
Offset = 6,
Nominal = 7,
Error = 8,
Filler = 9
Filler = 9;

View File

@ -1,18 +1,20 @@
// This file was generated by lezer-generator. You probably shouldn't edit it.
import {LRParser} from "@lezer/lr"
import {highlighting} from "./highlight"
import { LRParser } from '@lezer/lr';
import { highlighting } from './highlight';
export const parser = LRParser.deserialize({
version: 14,
states: "$nQVQPOOObQQO'#C^OOQO'#Cl'#ClOjQPO'#CuOxQPO'#CdOOQO'#Ce'#CeOOQO'#Ck'#CkOOQO'#Cf'#CfQVQPOOO}QPO,58xO!SQPO,58{OOQO,59a,59aO!XQPO,59OOOQO-E6d-E6dO!^QSO1G.dO!cQPO1G.gOOQO1G.j1G.jO!hQQO'#CpOOQO'#C`'#C`O!pQPO7+$OOOQO'#Cg'#CgO!uQPO'#CcO!}QPO7+$RO!^QSO,59[OOQO<<Gj<<GjOOQO-E6e-E6eOOQO<<Gm<<GmOOQO1G.v1G.v",
stateData: "#V~O^OS~ObPOgROhSO~ORXOUYO~OgRO[iXbiXhiX~OgRO~Oc^O~Oc_O~Oh`O~OeaO~OgdO~OfgOadX~OahO~OgdOaVX~OajO~Og^~",
goto: "!kjPPkPokPruuy!PPPP!VuPPP!ZPPPP!aTQOWRc^Rf_TUOWQWOR]WQe_RieTVOWQb^RkgSTOWQZRR[S",
nodeNames: "⚠ Text RefEntity Global Grams RefSyntactic Offset Nominal Error Filler",
states:
"$nQVQPOOObQQO'#C^OOQO'#Cl'#ClOjQPO'#CuOxQPO'#CdOOQO'#Ce'#CeOOQO'#Ck'#CkOOQO'#Cf'#CfQVQPOOO}QPO,58xO!SQPO,58{OOQO,59a,59aO!XQPO,59OOOQO-E6d-E6dO!^QSO1G.dO!cQPO1G.gOOQO1G.j1G.jO!hQQO'#CpOOQO'#C`'#C`O!pQPO7+$OOOQO'#Cg'#CgO!uQPO'#CcO!}QPO7+$RO!^QSO,59[OOQO<<Gj<<GjOOQO-E6e-E6eOOQO<<Gm<<GmOOQO1G.v1G.v",
stateData: '#V~O^OS~ObPOgROhSO~ORXOUYO~OgRO[iXbiXhiX~OgRO~Oc^O~Oc_O~Oh`O~OeaO~OgdO~OfgOadX~OahO~OgdOaVX~OajO~Og^~',
goto: '!kjPPkPokPruuy!PPPP!VuPPP!ZPPPP!aTQOWRc^Rf_TUOWQWOR]WQe_RieTVOWQb^RkgSTOWQZRR[S',
nodeNames: '⚠ Text RefEntity Global Grams RefSyntactic Offset Nominal Error Filler',
maxTerm: 25,
propSources: [highlighting],
skippedNodes: [0],
repeatNodeCount: 2,
tokenData: ".V~R!UOX$eXZ%VZ^%z^p$epq%Vqr'sr|$e|}'x}!O(f!O!Q$e!Q!R)i!R![*i![!b$e!b!c+k!c!d+v!d!e)i!e!f+v!f!g+v!g!h)i!h!i+v!i!r)i!r!s+v!s!t)i!t!u+v!u!v+v!v!w+v!w!z)i!z!{+v!{!})i!}#T$e#T#o)i#p#q-{#q#r.Q#r#y$e#y#z%z#z$f$e$f$g%z$g#BY$e#BY#BZ%z#BZ$IS$e$IS$I_%z$I_$I|$e$I|$JO%z$JO$JT$e$JT$JU%z$JU$KV$e$KV$KW%z$KW&FU$e&FU&FV%z&FV;'S$e;'S;=`%P<%lO$eP$jVgPOX$eZp$er!b$e!c#o$e#r;'S$e;'S;=`%P<%lO$eP%SP;=`<%l$e~%[Y^~X^%Vpq%V#y#z%V$f$g%V#BY#BZ%V$IS$I_%V$I|$JO%V$JT$JU%V$KV$KW%V&FU&FV%V~&RjgP^~OX$eXZ%VZ^%z^p$epq%Vr!b$e!c#o$e#r#y$e#y#z%z#z$f$e$f$g%z$g#BY$e#BY#BZ%z#BZ$IS$e$IS$I_%z$I_$I|$e$I|$JO%z$JO$JT$e$JT$JU%z$JU$KV$e$KV$KW%z$KW&FU$e&FU&FV%z&FV;'S$e;'S;=`%P<%lO$e~'xOh~R(PVfQgPOX$eZp$er!b$e!c#o$e#r;'S$e;'S;=`%P<%lO$eV(m^eSgPOX$eZp$er}$e}!O)i!O!Q$e!Q!R)i!R![*i![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$eT)p]eSgPOX$eZp$er}$e}!O)i!O!Q$e!Q![)i![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$eV*r]UQeSgPOX$eZp$er}$e}!O)i!O!Q$e!Q![*i![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$e~+nP#o#p+q~+vOb~V+}^eSgPOX$eZp$er}$e}!O)i!O!Q$e!Q!R)i!R![,y![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$eV-S]RQeSgPOX$eZp$er}$e}!O)i!O!Q$e!Q![,y![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$e~.QOc~~.VOa~",
tokenData:
".V~R!UOX$eXZ%VZ^%z^p$epq%Vqr'sr|$e|}'x}!O(f!O!Q$e!Q!R)i!R![*i![!b$e!b!c+k!c!d+v!d!e)i!e!f+v!f!g+v!g!h)i!h!i+v!i!r)i!r!s+v!s!t)i!t!u+v!u!v+v!v!w+v!w!z)i!z!{+v!{!})i!}#T$e#T#o)i#p#q-{#q#r.Q#r#y$e#y#z%z#z$f$e$f$g%z$g#BY$e#BY#BZ%z#BZ$IS$e$IS$I_%z$I_$I|$e$I|$JO%z$JO$JT$e$JT$JU%z$JU$KV$e$KV$KW%z$KW&FU$e&FU&FV%z&FV;'S$e;'S;=`%P<%lO$eP$jVgPOX$eZp$er!b$e!c#o$e#r;'S$e;'S;=`%P<%lO$eP%SP;=`<%l$e~%[Y^~X^%Vpq%V#y#z%V$f$g%V#BY#BZ%V$IS$I_%V$I|$JO%V$JT$JU%V$KV$KW%V&FU&FV%V~&RjgP^~OX$eXZ%VZ^%z^p$epq%Vr!b$e!c#o$e#r#y$e#y#z%z#z$f$e$f$g%z$g#BY$e#BY#BZ%z#BZ$IS$e$IS$I_%z$I_$I|$e$I|$JO%z$JO$JT$e$JT$JU%z$JU$KV$e$KV$KW%z$KW&FU$e&FU&FV%z&FV;'S$e;'S;=`%P<%lO$e~'xOh~R(PVfQgPOX$eZp$er!b$e!c#o$e#r;'S$e;'S;=`%P<%lO$eV(m^eSgPOX$eZp$er}$e}!O)i!O!Q$e!Q!R)i!R![*i![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$eT)p]eSgPOX$eZp$er}$e}!O)i!O!Q$e!Q![)i![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$eV*r]UQeSgPOX$eZp$er}$e}!O)i!O!Q$e!Q![*i![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$e~+nP#o#p+q~+vOb~V+}^eSgPOX$eZp$er}$e}!O)i!O!Q$e!Q!R)i!R![,y![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$eV-S]RQeSgPOX$eZp$er}$e}!O)i!O!Q$e!Q![,y![!b$e!c!})i!}#T$e#T#o)i#r;'S$e;'S;=`%P<%lO$e~.QOc~~.VOa~",
tokenizers: [0, 1, 2],
topRules: {"Text":[0,1]},
topRules: { Text: [0, 1] },
tokenPrec: 96
})
});

View File

@ -30,6 +30,34 @@ import { refsNavigation } from './click-navigation';
import { NaturalLanguage, ReferenceTokens } from './parse';
import { refsHoverTooltip } from './tooltip';
const editorSetup: BasicSetupOptions = {
highlightSpecialChars: false,
history: true,
drawSelection: false,
syntaxHighlighting: false,
defaultKeymap: true,
historyKeymap: true,
lineNumbers: false,
highlightActiveLineGutter: false,
foldGutter: false,
dropCursor: true,
allowMultipleSelections: false,
indentOnInput: false,
bracketMatching: false,
closeBrackets: false,
autocompletion: false,
rectangularSelection: false,
crosshairCursor: false,
highlightActiveLine: false,
highlightSelectionMatches: false,
closeBracketsKeymap: false,
searchKeymap: false,
foldKeymap: false,
completionKeymap: false,
lintKeymap: false
};
interface RefsInputInputProps
extends Pick<
ReactCodeMirrorProps,
@ -199,32 +227,3 @@ export const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
);
}
);
// ======= Internal ==========
const editorSetup: BasicSetupOptions = {
highlightSpecialChars: false,
history: true,
drawSelection: false,
syntaxHighlighting: false,
defaultKeymap: true,
historyKeymap: true,
lineNumbers: false,
highlightActiveLineGutter: false,
foldGutter: false,
dropCursor: true,
allowMultipleSelections: false,
indentOnInput: false,
bracketMatching: false,
closeBrackets: false,
autocompletion: false,
rectangularSelection: false,
crosshairCursor: false,
highlightActiveLine: false,
highlightSelectionMatches: false,
closeBracketsKeymap: false,
searchKeymap: false,
foldKeymap: false,
completionKeymap: false,
lintKeymap: false
};

View File

@ -26,6 +26,34 @@ import { RSLanguage } from './rslang';
import { getSymbolSubstitute, RSTextWrapper } from './text-editing';
import { rsHoverTooltip } from './tooltip';
const editorSetup: BasicSetupOptions = {
highlightSpecialChars: false,
history: true,
drawSelection: false,
syntaxHighlighting: false,
defaultKeymap: true,
historyKeymap: true,
lineNumbers: false,
highlightActiveLineGutter: false,
foldGutter: false,
dropCursor: true,
allowMultipleSelections: false,
indentOnInput: false,
bracketMatching: false,
closeBrackets: false,
autocompletion: false,
rectangularSelection: false,
crosshairCursor: false,
highlightActiveLine: false,
highlightSelectionMatches: false,
closeBracketsKeymap: false,
searchKeymap: false,
foldKeymap: false,
completionKeymap: false,
lintKeymap: false
};
interface RSInputProps
extends Pick<
ReactCodeMirrorProps,
@ -63,7 +91,6 @@ export const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
className,
style,
onChange,
onAnalyze,
...restProps
},
@ -169,7 +196,6 @@ export const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
theme={customTheme}
extensions={editorExtensions}
indentWithTab={false}
onChange={onChange}
editable={!disabled}
onKeyDown={handleInput}
{...restProps}
@ -178,32 +204,3 @@ export const RSInput = forwardRef<ReactCodeMirrorRef, RSInputProps>(
);
}
);
// ======= Internal ==========
const editorSetup: BasicSetupOptions = {
highlightSpecialChars: false,
history: true,
drawSelection: false,
syntaxHighlighting: false,
defaultKeymap: true,
historyKeymap: true,
lineNumbers: false,
highlightActiveLineGutter: false,
foldGutter: false,
dropCursor: true,
allowMultipleSelections: false,
indentOnInput: false,
bracketMatching: false,
closeBrackets: false,
autocompletion: false,
rectangularSelection: false,
crosshairCursor: false,
highlightActiveLine: false,
highlightSelectionMatches: false,
closeBracketsKeymap: false,
searchKeymap: false,
foldKeymap: false,
completionKeymap: false,
lintKeymap: false
};