feat: add generate for images

unit-mesh · Nov 23, 2023 · 61847c9 · 61847c9
1 parent 23dde6b
commit 61847c9
Show file tree

Hide file tree

Showing 6 changed files with 281 additions and 10 deletions.
diff --git a/components/editor/intelli/ai-block-editor.jsx b/components/editor/intelli/ai-block-editor.jsx
@@ -1,7 +1,10 @@
-import { EditorContent, Extension, useEditor } from '@tiptap/react'
 import React, { useEffect } from 'react'
+import { EditorContent, Extension, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { EnterIcon } from '@radix-ui/react-icons'
+import * as Select from '@radix-ui/react-select'
+import { SelectItem } from '@radix-ui/react-select'
+import { BeSelect, BeSelectItem } from '../ui-select'
 
 export const AiBlockEditor = ({ content, cancel }) => {
   const ActionBar = Extension.create({
@@ -75,15 +78,23 @@ export const AiBlockEditor = ({ content, cancel }) => {
   return (
     <div className={'ai-block-editor-block'}>
       <EditorContent editor={editor} className={'ai-block-editor'}/>
-      {editor && <div className={'ai-block-actions'}>
-        <button onClick={() => {
-          editor.commands.callAi()
-        }}>
-          Go<EnterIcon/>
-        </button>
-        <button onClick={() => {
-          editor.commands.cancelAi()
-        }}>Cancel <span>esc</span></button>
+      {editor && <div className={'ai-block-action-block'}>
+        <div className={'llm-type-select'}>
+          <BeSelect defaultValue="1">
+            <BeSelectItem value="1">Text</BeSelectItem>
+            <BeSelectItem value="2">Image</BeSelectItem>
+          </BeSelect>
+        </div>
+        <div className={'ai-block-actions'}>
+          <button onClick={() => {
+            editor.commands.callAi()
+          }}>
+            Go<EnterIcon/>
+          </button>
+          <button onClick={() => {
+            editor.commands.cancelAi()
+          }}>Cancel <span>esc</span></button>
+        </div>
       </div>}
     </div>
   )

diff --git a/components/editor/ui-select.jsx b/components/editor/ui-select.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@radix-ui/react-icons';
+
+export const BeSelect = React.forwardRef(
+  ({ children, ...props }, forwardedRef) => {
+    return (
+      <SelectPrimitive.Root {...props}>
+        <SelectPrimitive.Trigger ref={forwardedRef}>
+          <SelectPrimitive.Value />
+          <SelectPrimitive.Icon>
+            <ChevronDownIcon />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content>
+            <SelectPrimitive.ScrollUpButton>
+              <ChevronUpIcon />
+            </SelectPrimitive.ScrollUpButton>
+            <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+            <SelectPrimitive.ScrollDownButton>
+              <ChevronDownIcon />
+            </SelectPrimitive.ScrollDownButton>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    );
+  }
+);
+
+export const BeSelectItem = React.forwardRef(
+  ({ children, ...props }, forwardedRef) => {
+    return (
+      <SelectPrimitive.Item {...props} ref={forwardedRef}>
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon />
+        </SelectPrimitive.ItemIndicator>
+      </SelectPrimitive.Item>
+    );
+  }
+);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@tailwindcss/typography": "^0.5.10",

diff --git a/pages/editor.css b/pages/editor.css
@@ -162,6 +162,24 @@
     min-height: 64px;
 }
 
+.ai-block-action-block {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.ai-block-action-block div {
+    flex: 1;
+}
+
+.llm-type-select button span {
+    display: inline-block;
+}
+
+.llm-type-select {
+    justify-content: flex-start;
+}
+
 .ai-block-actions {
     display: flex;
     justify-content: flex-end;

diff --git a/styles/global.css b/styles/global.css
@@ -1,3 +1,7 @@
+@import '@radix-ui/colors/black-alpha.css';
+@import '@radix-ui/colors/mauve.css';
+@import '@radix-ui/colors/violet.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -228,6 +232,105 @@ input {
     }
 }
 
+
+.SelectTrigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0 15px;
+    font-size: 13px;
+    line-height: 1;
+    height: 35px;
+    gap: 5px;
+    background-color: white;
+    color: var(--violet-11);
+    box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.SelectTrigger:hover {
+    background-color: var(--mauve-3);
+}
+
+.SelectTrigger:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.SelectTrigger[data-placeholder] {
+    color: var(--violet-9);
+}
+
+.SelectIcon {
+    color: Var(--violet-11);
+}
+
+.SelectContent {
+    overflow: hidden;
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+}
+
+.SelectViewport {
+    padding: 5px;
+}
+
+.SelectItem {
+    font-size: 13px;
+    line-height: 1;
+    color: var(--violet-11);
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    height: 25px;
+    padding: 0 35px 0 25px;
+    position: relative;
+    user-select: none;
+}
+
+.SelectItem[data-disabled] {
+    color: var(--mauve-8);
+    pointer-events: none;
+}
+
+.SelectItem[data-highlighted] {
+    outline: none;
+    background-color: var(--violet-9);
+    color: var(--violet-1);
+}
+
+.SelectLabel {
+    padding: 0 25px;
+    font-size: 12px;
+    line-height: 25px;
+    color: var(--mauve-11);
+}
+
+.SelectSeparator {
+    height: 1px;
+    background-color: var(--violet-6);
+    margin: 5px;
+}
+
+.SelectItemIndicator {
+    position: absolute;
+    left: 0;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.SelectScrollButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 25px;
+    background-color: white;
+    color: var(--violet-11);
+    cursor: default;
+}
+
 .is-active {
     background-color: var(--violet-3);
 }