-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(html): add AI Powered Editor Inline Prompt spec
- Loading branch information
Showing
4 changed files
with
141 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) => ( | ||
| <> | ||
| <Popup className="k-prompt-popup" animationStyle={{width: "420px"}}> | ||
| <Prompt | ||
| {...props} | ||
| > | ||
| <PromptContent> | ||
| <PromptView> | ||
| <Card> | ||
| <CardBody> | ||
| <p>Suggested response content from external service may be presented here so it could update or inserted after a selection, or just discarded.</p> | ||
| </CardBody> | ||
| <ActionButtons className="k-card-actions" alignment="start"> | ||
| <IconTextButton fillMode="flat" themeColor="primary" icon="insert-bottom">Insert</IconTextButton> | ||
| <IconTextButton fillMode="flat" themeColor="primary" icon="check">Replace</IconTextButton> | ||
| <IconTextButton fillMode="flat" themeColor="base" icon="cancel-outline">Discard</IconTextButton> | ||
| </ActionButtons> | ||
| </Card> | ||
| <Textbox placeholder="Edit, generate or explain ..." separators={false} | ||
| prefix={<> | ||
| <IconButton fillMode="flat" icon="sparkles" /> | ||
| </>} | ||
| suffix={<> | ||
| <IconButton fillMode="flat" icon="paper-plane" /> | ||
| </>} /> | ||
| </PromptView> | ||
| </PromptContent> | ||
| </Prompt> | ||
| </Popup> | ||
| <> | ||
| <Popup className="k-menu-popup"> | ||
| <ContextMenuNormal> | ||
| <MenuListItem first icon="arrow-rotate-cw" text="Rewrite"></MenuListItem> | ||
| <MenuListItem icon="spell-checker" text="Fix mistakes"></MenuListItem> | ||
| <MenuListItem icon="tell-a-friend" text="Change tone" showArrow hover></MenuListItem> | ||
| <MenuListItem icon="spell-checker" text="Polish formatting"></MenuListItem> | ||
| <MenuListItem icon="col-resize" text="Adjust length" showArrow></MenuListItem> | ||
| <MenuListItem last icon="edit-tools" text="Translate" showArrow></MenuListItem> | ||
| </ContextMenuNormal> | ||
| </Popup> | ||
|
|
||
| <Popup className="k-menu-popup" offset={{ left: "187px", top: "354px"}}> | ||
| <ContextMenuNormal> | ||
| <MenuListItem first text="Neutral" hover></MenuListItem> | ||
| <MenuListItem text="Friendly"></MenuListItem> | ||
| <MenuListItem text="Casual"></MenuListItem> | ||
| <MenuListItem last text="Formal"></MenuListItem> | ||
| </ContextMenuNormal> | ||
| </Popup> | ||
| </> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 () =>( | ||
| <> | ||
| <style>{styles}</style> | ||
| <div id="test-area" className="k-d-grid k-grid-cols-2"> | ||
| <span>AI Powered Editor Inline Prompt</span> | ||
| <span>AI Powered Editor Inline Prompt Long Text</span> | ||
|
|
||
| <section> | ||
| <PromptInline /> | ||
| </section> | ||
|
|
||
| <section> | ||
| <> | ||
| <Popup className="k-prompt-popup" animationStyle={{width: "420px"}}> | ||
| <Prompt> | ||
| <PromptContent> | ||
| <PromptView> | ||
| <Card> | ||
| <CardBody style={{maxHeight: "250px", overflowY: "auto" }}> | ||
| <p>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.</p> | ||
| <p>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.</p> | ||
| </CardBody> | ||
| <ActionButtons className="k-card-actions" alignment="start"> | ||
| <IconTextButton fillMode="flat" themeColor="primary" icon="insert-bottom">Insert</IconTextButton> | ||
| <IconTextButton fillMode="flat" themeColor="primary" icon="check">Replace</IconTextButton> | ||
| <IconTextButton fillMode="flat" themeColor="base" icon="cancel-outline">Discard</IconTextButton> | ||
| </ActionButtons> | ||
| </Card> | ||
| <Textbox placeholder="Edit, generate or explain ..." separators={false} | ||
| prefix={<> | ||
| <IconButton fillMode="flat" icon="sparkles" /> | ||
| </>} | ||
| suffix={<> | ||
| <IconButton fillMode="flat" icon="paper-plane" /> | ||
| </>} /> | ||
| </PromptView> | ||
| </PromptContent> | ||
| </Prompt> | ||
| </Popup> | ||
| <> | ||
| <Popup className="k-menu-popup"> | ||
| <ContextMenuNormal> | ||
| <MenuListItem first icon="arrow-rotate-cw" text="Rewrite"></MenuListItem> | ||
| <MenuListItem icon="spell-checker" text="Fix mistakes"></MenuListItem> | ||
| <MenuListItem icon="tell-a-friend" text="Change tone" showArrow></MenuListItem> | ||
| <MenuListItem icon="spell-checker" text="Polish formatting"></MenuListItem> | ||
| <MenuListItem icon="col-resize" text="Adjust length" showArrow></MenuListItem> | ||
| <MenuListItem last icon="edit-tools" text="Translate" showArrow></MenuListItem> | ||
| </ContextMenuNormal> | ||
| </Popup> | ||
| </> | ||
| </> | ||
| </section> | ||
|
|
||
| </div> | ||
| </> | ||
| ); |