From 78afd92f481f6bde5c4022ed32a57f45fa6248e1 Mon Sep 17 00:00:00 2001 From: Teya Veselinova Date: Thu, 6 Feb 2025 15:33:23 +0200 Subject: [PATCH] feat(html): add AI Powered Editor Inline Prompt spec --- packages/html/src/prompt/index.ts | 1 + packages/html/src/prompt/prompt.spec.tsx | 5 -- .../src/prompt/templates/prompt-inline.tsx | 61 ++++++++++++++ .../html/src/prompt/tests/prompt-inline.tsx | 79 +++++++++++++++++++ 4 files changed, 141 insertions(+), 5 deletions(-) create mode 100644 packages/html/src/prompt/templates/prompt-inline.tsx create mode 100644 packages/html/src/prompt/tests/prompt-inline.tsx diff --git a/packages/html/src/prompt/index.ts b/packages/html/src/prompt/index.ts index c9d51894064..5f87d0fc1a5 100644 --- a/packages/html/src/prompt/index.ts +++ b/packages/html/src/prompt/index.ts @@ -11,3 +11,4 @@ export * from './templates/prompt-settings'; export * from './templates/prompt-output'; export * from './templates/prompt-more-actions'; export * from './templates/prompt-popup'; +export * from './templates/prompt-inline'; diff --git a/packages/html/src/prompt/prompt.spec.tsx b/packages/html/src/prompt/prompt.spec.tsx index 72c712d8a23..0ddb80737f2 100644 --- a/packages/html/src/prompt/prompt.spec.tsx +++ b/packages/html/src/prompt/prompt.spec.tsx @@ -6,15 +6,10 @@ const states = []; const options = {}; -export type KendoPromptProps = { - positionMode: "absolute" | "fixed"; -}; - const defaultOptions = {}; export const Prompt = ( props: - KendoPromptProps & React.HTMLAttributes ) => { const { diff --git a/packages/html/src/prompt/templates/prompt-inline.tsx b/packages/html/src/prompt/templates/prompt-inline.tsx new file mode 100644 index 00000000000..3990148e996 --- /dev/null +++ b/packages/html/src/prompt/templates/prompt-inline.tsx @@ -0,0 +1,61 @@ +import { ActionButtons } from "../../action-buttons"; +import { IconButton, IconTextButton } from "../../button"; +import { Prompt, PromptContent, PromptView } from ".."; +import { Card, CardBody } from "../../card"; +import { Textbox } from "../../textbox"; +import { MenuListItem } from "../../menu"; +import { Popup } from "../../popup"; +import { ContextMenuNormal } from "../../context-menu"; + +export const PromptInline = (props) => ( + <> + + + + + + +

Suggested response content from external service may be presented here so it could update or inserted after a selection, or just discarded.

+ + + Insert + Replace + Discard + + + + + } + suffix={<> + + } /> + + + + + <> + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/html/src/prompt/tests/prompt-inline.tsx b/packages/html/src/prompt/tests/prompt-inline.tsx new file mode 100644 index 00000000000..1a32ce0fe08 --- /dev/null +++ b/packages/html/src/prompt/tests/prompt-inline.tsx @@ -0,0 +1,79 @@ +import { ActionButtons } from "../../action-buttons"; +import { IconButton, IconTextButton } from "../../button"; +import { Card, CardBody } from "../../card"; +import { ContextMenuNormal } from "../../context-menu"; +import { MenuListItem } from "../../menu"; +import { Popup } from "../../popup"; +import { Textbox } from "../../textbox"; +import { PromptContent } from "../prompt-content"; +import { PromptView } from "../prompt-view"; +import Prompt from "../prompt.spec"; +import { PromptInline } from "../templates/prompt-inline"; + +const styles = ` + #test-area > section { + height: 600px; + } + + .k-animation-container:first-child { + position: relative; + } +`; + +export default () =>( + <> + +
+ AI Powered Editor Inline Prompt + AI Powered Editor Inline Prompt Long Text + +
+ +
+ +
+ <> + + + + + + +

Lorem ipsum odor amet, consectetuer adipiscing elit. Aliquet orci gravida taciti vestibulum litora justo volutpat cursus. Sed lectus quisque nibh maximus mattis vivamus non venenatis congue. Vulputate tristique urna molestie natoque rutrum aliquam aptent. Accumsan ex quisque mollis suspendisse duis amet id. Metus suscipit tincidunt neque neque torquent justo litora nisi nostra. Vivamus porttitor fermentum class sollicitudin; litora fermentum per.

+

Accumsan ornare quisque conubia montes hac interdum. Potenti mauris pharetra iaculis nam a. Elit scelerisque rhoncus accumsan inceptos malesuada habitant pulvinar condimentum curabitur. Sit potenti massa praesent id sodales cras duis. Erat augue litora interdum convallis, rhoncus blandit. Maecenas elementum quisque lacinia erat maximus sem tincidunt dis. Convallis potenti class turpis curabitur taciti diam vehicula.

+ + + Insert + Replace + Discard + + + + + } + suffix={<> + + } /> + + + + + <> + + + + + + + + + + + + +
+ +
+ +);