From 9b722f988afd172664b5721953a81092308ef408 Mon Sep 17 00:00:00 2001 From: nighca Date: Fri, 27 Dec 2024 17:19:27 +0800 Subject: [PATCH] Custom elements `CodeChange` & `CodeBlock` for `MarkdownView` --- spx-backend/internal/controller/copilot.go | 5 +- .../copilot/custom_element_code_change.md | 34 ++++++ ...lements.md => custom_element_code_link.md} | 10 +- spx-backend/internal/copilot/prompt.go | 21 ++-- spx-backend/internal/copilot/system_prompt.md | 12 +- .../code-text-editor/monaco.ts | 2 +- .../ui/api-reference/APIReferenceItem.vue | 11 +- .../editor/code-editor/ui/code-editor-ui.ts | 33 ++++-- .../ui/definition/DefinitionDetail.vue | 2 +- .../definition/DefinitionOverviewWrapper.vue | 2 +- .../code-editor/ui/markdown/CodeBlock.vue | 59 +++++++--- .../code-editor/ui/markdown/CodeChange.vue | 105 ++++++++++++++++++ .../code-editor/ui/markdown/CodeView.vue | 94 +++++++++++++++- .../code-editor/ui/markdown/MarkdownView.vue | 10 ++ .../ui/markdown/common/BlockActionBtn.vue | 39 +++++++ .../ui/markdown/common/BlockFooter.vue | 19 ++++ .../ui/markdown/common/BlockWrapper.vue | 20 ++++ spx-gui/src/components/ui/UIButton.vue | 4 +- .../src/components/ui/UIConfigProvider.vue | 2 +- spx-gui/src/components/ui/UIIconButton.vue | 4 +- spx-gui/src/components/ui/icons/UIIcon.vue | 8 +- spx-gui/src/components/ui/icons/apply.svg | 5 + spx-gui/src/components/ui/icons/copy.svg | 3 + spx-gui/src/components/ui/icons/insert.svg | 5 + spx-gui/src/components/ui/tokens/colors.ts | 9 +- spx-gui/src/utils/vnode.ts | 2 +- 26 files changed, 450 insertions(+), 70 deletions(-) create mode 100644 spx-backend/internal/copilot/custom_element_code_change.md rename spx-backend/internal/copilot/{custom_elements.md => custom_element_code_link.md} (80%) create mode 100644 spx-gui/src/components/editor/code-editor/ui/markdown/CodeChange.vue create mode 100644 spx-gui/src/components/editor/code-editor/ui/markdown/common/BlockActionBtn.vue create mode 100644 spx-gui/src/components/editor/code-editor/ui/markdown/common/BlockFooter.vue create mode 100644 spx-gui/src/components/editor/code-editor/ui/markdown/common/BlockWrapper.vue create mode 100644 spx-gui/src/components/ui/icons/apply.svg create mode 100644 spx-gui/src/components/ui/icons/copy.svg create mode 100644 spx-gui/src/components/ui/icons/insert.svg diff --git a/spx-backend/internal/controller/copilot.go b/spx-backend/internal/controller/copilot.go index 319f88196..ca665c188 100644 --- a/spx-backend/internal/controller/copilot.go +++ b/spx-backend/internal/controller/copilot.go @@ -118,8 +118,9 @@ func (ctrl *Controller) GenerateMessage(ctx context.Context, params *GenerateMes // * Switch to official API // * Use `[]anthropic.TextBlockParam` instead of `string` // * Enable prompt caching if it helps - System: anthropic.Raw[[]anthropic.TextBlockParam](copilot.SystemPrompt), - Messages: anthropic.F(messages), + System: anthropic.Raw[[]anthropic.TextBlockParam](copilot.SystemPrompt), + Messages: anthropic.F(messages), + Temperature: anthropic.F(0.5), }) if err != nil { logger.Printf("failed to generate message: %v", err) diff --git a/spx-backend/internal/copilot/custom_element_code_change.md b/spx-backend/internal/copilot/custom_element_code_change.md new file mode 100644 index 000000000..a9284e4c2 --- /dev/null +++ b/spx-backend/internal/copilot/custom_element_code_change.md @@ -0,0 +1,34 @@ +# `code-change` + +Display a change in the code. The change shows the difference between the original code and the new code. The user can apply the change by clicking "Apply" button in the element. + +## Attributes + +### `file` + +Text document URI, e.g., `file:///NiuXiaoQi.spx` + +### `line-range` + +The range of the original code. + +Format: `${startLine}-${endLine}`, e.g., `10-12` + +`startLine`, `endLine` are numbers start from 1. `10-12` means the range from line 10 to line 12. The end line is exclusive. + +### children + +The new code. + +## Examples + +### Basic example + +```xml + +show +say "Hello, world!" + +``` + +This is a change in the code of sprite `NiuXiaoQi`. The original code is line 10 & line 11. The new code is `show\nsay "Hello, world!"\n`. diff --git a/spx-backend/internal/copilot/custom_elements.md b/spx-backend/internal/copilot/custom_element_code_link.md similarity index 80% rename from spx-backend/internal/copilot/custom_elements.md rename to spx-backend/internal/copilot/custom_element_code_link.md index 36c8172ea..5d5322868 100644 --- a/spx-backend/internal/copilot/custom_elements.md +++ b/spx-backend/internal/copilot/custom_element_code_link.md @@ -10,16 +10,18 @@ Text document URI, e.g., `file:///NiuXiaoQi.spx` ### `position` -`${line},${column}`, e.g., `10,20`. - -`line` & `column` are numbers start from 1. `1,1` means the first column of the first line. +Format: `${line},${column}`, e.g., `10,20`. `line` & `column` are numbers start from 1. `1,1` means the first column of the first line. ### `range` -`${startLine},${startColumn}-${endLine}${endColumn}`, e.g., `10,20-12,10` +Format: `${startLine},${startColumn}-${endLine}${endColumn}`, e.g., `10,20-12,10` `startLine`, `startColumn`, `endLine`, `endColumn` are numbers start from 1. `10,20-12,10` means the range from line 10, column 20 to line 12, column 10. The end position is exclusive. +### children + +The text to display in the link. + ## Examples ### Basic example diff --git a/spx-backend/internal/copilot/prompt.go b/spx-backend/internal/copilot/prompt.go index a1461053a..cb8c806a8 100644 --- a/spx-backend/internal/copilot/prompt.go +++ b/spx-backend/internal/copilot/prompt.go @@ -15,25 +15,30 @@ var gopDefs string //go:embed spx_defs.json var spxDefs string -//go:embed custom_elements.md -var customElements string +//go:embed custom_element_code_link.md +var customElementCodeLink string + +//go:embed custom_element_code_change.md +var customElementCodeChange string //go:embed system_prompt.md var systemPromptTpl string type systemPromptTplData struct { - GopDefs string - SpxDefs string - CustomElements string + GopDefs string + SpxDefs string + CustomElementCodeLink string + CustomElementCodeChange string } var SystemPrompt string func init() { tplData := systemPromptTplData{ - GopDefs: gopDefs, - SpxDefs: spxDefs, - CustomElements: customElements, + GopDefs: gopDefs, + SpxDefs: spxDefs, + CustomElementCodeLink: customElementCodeLink, + CustomElementCodeChange: customElementCodeChange, } tpl, err := template.New("system-prompt").Parse(systemPromptTpl) if err != nil { diff --git a/spx-backend/internal/copilot/system_prompt.md b/spx-backend/internal/copilot/system_prompt.md index c02ca8019..6d85e3c6f 100644 --- a/spx-backend/internal/copilot/system_prompt.md +++ b/spx-backend/internal/copilot/system_prompt.md @@ -12,9 +12,15 @@ - custom-elements.md + custom-element-code-link.md -{{.CustomElements}} +{{.CustomElementCodeLink}} + + + + custom-element-code-change.md + +{{.CustomElementCodeChange}} @@ -153,4 +159,4 @@ Go+ Builder provides a visual programming interface for children to learn progra * You are not allowed to provide any external links or resources to the user. * Do not provide any personal information or ask for personal information from the user. * If possible, use short and concise responses. -* There are some special elements you can use in your responses, you can find them in the document `custom-elements.md`. Use them just like any other HTML tags, to make your responses more interactive and informative. +* There are some special elements you can use in your responses, you can find them in documents named `custom-element-*.md`. Use them just like any other HTML tags, to make your responses more interactive and informative. diff --git a/spx-gui/src/components/editor/code-editor-legacy/code-text-editor/monaco.ts b/spx-gui/src/components/editor/code-editor-legacy/code-text-editor/monaco.ts index 1a61e6b0f..ded1a1f59 100644 --- a/spx-gui/src/components/editor/code-editor-legacy/code-text-editor/monaco.ts +++ b/spx-gui/src/components/editor/code-editor-legacy/code-text-editor/monaco.ts @@ -45,7 +45,7 @@ export function initMonaco( rules: [ // TODO: review colors here { token: 'comment', foreground: color.hint[2], fontStyle: 'italic' }, - { token: 'string', foreground: color.green[300] }, + { token: 'string', foreground: color.green[600] }, { token: 'operator', foreground: color.blue.main }, { token: 'number', foreground: color.blue[600] }, { token: 'keyword', foreground: color.red[600] }, diff --git a/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue index 58de4c2d1..008f20d64 100644 --- a/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue +++ b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue @@ -1,6 +1,5 @@ diff --git a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue index 5cf96bb0a..854735a5a 100644 --- a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue +++ b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue @@ -8,7 +8,7 @@ defineProps<{ kind?: DefinitionKind }>() -const childrenText = useSlotText() +const childrenText = useSlotText('default', true)