-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: prompt cell output can be saved to variables
- Loading branch information
1 parent
05e113b
commit 7a8b983
Showing
8 changed files
with
226 additions
and
11 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
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
46 changes: 46 additions & 0 deletions
46
packages/libro-prompt-cell/src/variable-handler/index.less
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,46 @@ | ||
| .libro-variable-name-input { | ||
| border-left: 1px solid var(--mana-color-border); | ||
|
|
||
| svg { | ||
| margin-left: 4px; | ||
| } | ||
|
|
||
| &-label { | ||
| padding-left: 16px; | ||
| color: var(--mana-libro-cell-header-title); | ||
| font-weight: 400; | ||
| font-size: 14px; | ||
| font-family: SFProText; | ||
| line-height: 36px; | ||
| letter-spacing: 0; | ||
| } | ||
|
|
||
| &-input { | ||
| width: 120px; | ||
| height: 32px; | ||
| border: 1px solid #d6d8da; | ||
| border-radius: 6px; | ||
| box-shadow: unset; | ||
| } | ||
|
|
||
| &-popover { | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| &-warning-text { | ||
| margin-top: 4px; | ||
| color: #faad14; | ||
| } | ||
|
|
||
| &-actions { | ||
| padding: 2px 0; | ||
|
|
||
| span + span { | ||
| margin-left: 8px; | ||
| } | ||
|
|
||
| span { | ||
| color: #1890ff; | ||
| } | ||
| } | ||
| } |
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 @@ | ||
| export * from './variable-name-input.js'; |
121 changes: 121 additions & 0 deletions
121
packages/libro-prompt-cell/src/variable-handler/variable-name-input.tsx
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,121 @@ | ||
| import { EditFilled } from '@ant-design/icons'; | ||
| import { LirboContextKey } from '@difizen/libro-core'; | ||
| import { useInject } from '@difizen/mana-app'; | ||
| import { l10n } from '@difizen/mana-l10n'; | ||
| import { Input, Popover } from 'antd'; | ||
| import classNames from 'classnames'; | ||
| import type { FC } from 'react'; | ||
| import { useEffect } from 'react'; | ||
| import { useRef } from 'react'; | ||
| import { useCallback, useState } from 'react'; | ||
| import './index.less'; | ||
|
|
||
| interface VariableNameInputPopoverContentProps { | ||
| value: string; | ||
| handleVariableNameChange: (variableName: string) => void; | ||
| checkVariableNameAvailable: (variableName: string) => boolean; | ||
| cancel: () => void; | ||
| } | ||
|
|
||
| export const VariableNameInputPopoverContent: FC< | ||
| VariableNameInputPopoverContentProps | ||
| > = (props: VariableNameInputPopoverContentProps) => { | ||
| const { value, handleVariableNameChange, checkVariableNameAvailable, cancel } = props; | ||
| const [variableNameAvailable, setVariableNameAvailable] = useState(true); | ||
| const [variableName, setVariableName] = useState(value); | ||
|
|
||
| useEffect(() => { | ||
| setVariableName(value); | ||
| }, [value]); | ||
|
|
||
| const handleValueChange = useCallback( | ||
| (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| if (checkVariableNameAvailable(e.target.value)) { | ||
| setVariableNameAvailable(false); | ||
| } else { | ||
| setVariableNameAvailable(true); | ||
| } | ||
| setVariableName(e.target.value); | ||
| }, | ||
| [checkVariableNameAvailable], | ||
| ); | ||
|
|
||
| const handValueSave = useCallback(() => { | ||
| handleVariableNameChange(variableName); | ||
| cancel(); | ||
| }, [variableName, handleVariableNameChange, cancel]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Input | ||
| status={`${variableNameAvailable ? '' : 'warning'}`} | ||
| className="libro-variable-name-input-component" | ||
| onChange={handleValueChange} | ||
| value={variableName} | ||
| /> | ||
|
|
||
| {!variableNameAvailable && ( | ||
| <span className="libro-variable-name-input-warning-text"> | ||
| {l10n.t('当前变量名已存在')} | ||
| </span> | ||
| )} | ||
|
|
||
| <div className="libro-variable-name-input-actions"> | ||
| <span onClick={cancel}>{l10n.t('取消')}</span> | ||
| <span onClick={handValueSave}>{l10n.t('保存')}</span> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| interface VariableNameInputProps { | ||
| value: string; | ||
| handleVariableNameChange: (variableName: string) => void; | ||
| checkVariableNameAvailable: (variableName: string) => boolean; | ||
| classname?: string; | ||
| } | ||
| const variableNameInputCls = 'libro-variable-name-input'; | ||
| export const VariableNameInput: FC<VariableNameInputProps> = ( | ||
| props: VariableNameInputProps, | ||
| ) => { | ||
| const { value } = props; | ||
| const [popoverVisible, setPopoverVisible] = useState(false); | ||
| const contextKey = useInject(LirboContextKey); | ||
| const ref = useRef<HTMLDivElement>(null); | ||
| return ( | ||
| <div className={classNames(variableNameInputCls, props.classname)} ref={ref}> | ||
| <span className="libro-variable-name-input-label">Save: </span> | ||
| <span className="libro-variable-name-input-value">{value || '...'}</span> | ||
| <span className="libro-variable-name-input-popover"> | ||
| <Popover | ||
| content={ | ||
| <VariableNameInputPopoverContent | ||
| {...props} | ||
| cancel={() => { | ||
| setPopoverVisible(false); | ||
| }} | ||
| /> | ||
| } | ||
| placement="bottomLeft" | ||
| open={popoverVisible} | ||
| onOpenChange={(visible) => { | ||
| if (visible) { | ||
| contextKey.disableCommandMode(); | ||
| } else { | ||
| contextKey.enableCommandMode(); | ||
| } | ||
| setPopoverVisible(visible); | ||
| }} | ||
| getPopupContainer={() => { | ||
| return ref.current?.getElementsByClassName( | ||
| variableNameInputCls, | ||
| )[0] as HTMLElement; | ||
| }} | ||
| trigger="click" | ||
| > | ||
| <EditFilled /> | ||
| </Popover> | ||
| </span> | ||
| </div> | ||
| ); | ||
| }; |