refactor: rename for more files

src/components/editor/menu-bar.jsx → src/components/editor/menu-bar.tsx

@@ -11,9 +11,11 @@ import {
 } from '@radix-ui/react-icons'
 import React from 'react'
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
+import { Editor } from "@tiptap/core";
+
 import { MenuAiDropdown } from './intelli/menu/menu-ai-dropdown'
 
-export const MenuBar = ({ editor }) => {
+export const MenuBar = ({ editor }: { editor: Editor }) => {
   return (
     <ToggleGroup.Root
       className={'ToggleGroup'}

src/components/editor/ui-select.tsx

@@ -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.FC<any> = React.forwardRef(
+	({ children, ...props }, forwardedRef) => {
+		return (
+			<SelectPrimitive.Root {...props}>
+				<SelectPrimitive.Trigger className={'SelectTrigger'} ref={forwardedRef as any}>
+					<SelectPrimitive.Value/>
+					<SelectPrimitive.Icon className={"SelectIcon"}>
+						<ChevronDownIcon/>
+					</SelectPrimitive.Icon>
+				</SelectPrimitive.Trigger>
+				<SelectPrimitive.Portal>
+					<SelectPrimitive.Content>
+						<SelectPrimitive.ScrollUpButton className="SelectScrollButton">
+							<ChevronUpIcon/>
+						</SelectPrimitive.ScrollUpButton>
+						<SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+						<SelectPrimitive.ScrollDownButton className="SelectScrollButton">
+							<ChevronDownIcon/>
+						</SelectPrimitive.ScrollDownButton>
+					</SelectPrimitive.Content>
+				</SelectPrimitive.Portal>
+			</SelectPrimitive.Root>
+		);
+	}
+);
+
+export const BeSelectItem: React.FC<any> = React.forwardRef(
+	({ children, ...props }, forwardedRef) => {
+		return (
+			<SelectPrimitive.Item {...props} className={'SelectItem'} ref={forwardedRef}>
+				<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+				<SelectPrimitive.ItemIndicator>
+					<CheckIcon/>
+				</SelectPrimitive.ItemIndicator>
+			</SelectPrimitive.Item>
+		);
+	}
+);

src/components/editor/variable/variable-manage.js → src/components/editor/variable/variable-manage.ts

@@ -1,4 +1,3 @@
-//
 export function VariableManage() {
 
 }

src/components/settings.tsx

@@ -0,0 +1,60 @@
+import { Cross2Icon, GearIcon } from '@radix-ui/react-icons'
+import * as Dialog from '@radix-ui/react-dialog'
+import * as Tabs from '@radix-ui/react-tabs'
+
+import styles from '../../styles/Home.module.css'
+
+export const Settings = () => {
+	return <Dialog.Root>
+		<Dialog.Trigger asChild>
+			<div className={styles.setting}>
+				<button onClick={() => {
+					// show some dialog
+				}}>
+					<GearIcon/>
+				</button>
+			</div>
+		</Dialog.Trigger>
+		<Dialog.Portal>
+			<Dialog.Overlay className="DialogOverlay"/>
+			<Dialog.Content className="DialogContent">
+				<Dialog.Title className="DialogTitle">Custom Prompt Settings</Dialog.Title>
+
+				<Tabs.Root className="TabsRoot" defaultValue="tab1">
+					<Tabs.List className="TabsList" aria-label="Manage your account">
+						<Tabs.Trigger className="TabsTrigger" value="tab1">
+							Toolbar AI
+						</Tabs.Trigger>
+						<Tabs.Trigger className="TabsTrigger" value="tab2">
+							Bubble Menu
+						</Tabs.Trigger>
+						<Tabs.Trigger className="TabsTrigger" value="tab3">
+							Slash Command
+						</Tabs.Trigger>
+					</Tabs.List>
+					<Tabs.Content className="TabsContent" value="tab1">
+						<SettingField/>
+					</Tabs.Content>
+					<Tabs.Content className="TabsContent" value="tab2">
+						<SettingField/>
+					</Tabs.Content>
+					<Tabs.Content className="TabsContent" value="tab3">
+						<SettingField/>
+					</Tabs.Content>
+				</Tabs.Root>
+
+				<Dialog.Close asChild>
+					<button className="IconButton" aria-label="Close">
+						<Cross2Icon/>
+					</button>
+				</Dialog.Close>
+			</Dialog.Content>
+		</Dialog.Portal>
+	</Dialog.Root>
+}
+
+const SettingField = ({ label, children }: any) => (
+	<textarea id="message"
+	          className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+	          placeholder="Write your thoughts here..."></textarea>
+)

src/pages/_app.js → src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import "../../styles/global.css"
 import "./editor.css"
 
-export default function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }: any) {
   return <Component {...pageProps} />
 }

src/pages/index.js → src/pages/index.tsx

@@ -1,7 +1,8 @@
 import Head from 'next/head'
+
 import styles from '../../styles/Home.module.css'
-import LiveEditor from '../components/editor/live-editor'
-import { Settings } from '../components/settings'
+import LiveEditor from '@/components/editor/live-editor'
+import { Settings } from '@/components/settings'
 
 export default function Home() {
   return (

src/prompts/prebuild/menubar-prompts.ts

@@ -1,10 +1,10 @@
-import {FacetType, OutputForm, PromptAction} from "@/types/custom-action.type";
+import { FacetType, OutputForm, PromptAction } from "@/types/custom-action.type";
 
 const MenubarPrompts: PromptAction[] = [
-  {
-    name: 'File',
-    template: '',
-    facetType: FacetType.TOOLBAR_MENU,
-    outputForm: OutputForm.CHAT,
-  }
+	{
+		name: 'File',
+		template: `{{#each items}}`,
+		facetType: FacetType.TOOLBAR_MENU,
+		outputForm: OutputForm.CHAT,
+	}
 ];

src/prompts/prompts-manager.ts

@@ -0,0 +1,8 @@
+import Handlebars from 'handlebars'
+
+class PromptsManager {
+	compile(string: string, data: object) {
+		const template = Handlebars.compile(string)
+		return template(data)
+	}
+}