feat!: add create tool

assets/scss/index.scss

@@ -16,3 +16,13 @@ html.dark {
   opacity: 0;
   filter: blur(1rem);
 }
+
+.layout-enter-active,
+.layout-leave-active {
+  transition: all 0.4s;
+}
+.layout-enter-from,
+.layout-leave-to {
+  opacity: 0;
+  filter: grayscale(1);
+}

components/Card.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    rounded-xl
+    border="~ gray-200"
+    dark:border-gray-800
+    bg-white
+    dark:bg-dark-900
+    p-4
+  >
+    <slot />
+  </div>
+</template>

components/app/AppGPTSettingForms.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const { storageOptions: options } = useChatGPT();
+</script>
+
+<template>
+  <el-form size="large" label-position="top">
+    <el-form-item label="API Key">
+      <el-input v-model="options.apiKey" placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></el-input>
+    </el-form-item>
+    <el-form-item label="API Base Url">
+      <el-input
+        v-model="options.apiBaseUrl"
+        placeholder="API Base Url"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="Model">
+      <el-select w-full v-model="options.model">
+        <el-option value="gpt-3.5-turbo-0301"></el-option>
+        <el-option value="gpt-3.5-turbo"></el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>

components/app/AppHeader.vue

@@ -10,6 +10,7 @@
       <AppHeaderNavigation />
     </div>
     <div flex items-center col-span-4 justify-end>
+      <AppSettings />
       <AppThemeSelect />
       <AppSocialIcons hidden md:flex />
     </div>

components/app/AppHeaderLogo.vue

@@ -4,7 +4,7 @@ const localePath = useLocalePath();
 
 <template>
   <NuxtLink
-    text-xl
+    text-2xl
     font-bold
     color-gray-900
     dark:color-gray-100

components/app/AppSettings.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+const show = ref(false);
+</script>
+<template>
+  <div>
+    <el-button text @click="show = true">
+      <el-icon class="i-carbon:settings"></el-icon>
+    </el-button>
+    <ClientOnly>
+      <el-dialog v-model="show" title="App Settings">
+        <AppGPTSettingForms />
+      </el-dialog>
+    </ClientOnly>
+  </div>
+</template>

components/create/CreateForms.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+const { step, maxStep, nextStep, prevStep, tool, isCreate } = useCreateTool();
+const { save } = useCustomTools();
+const localePath = useLocalePath();
+const handleSave = async () => {
+  await save(tool.value);
+  navigateTo({
+    path: localePath(`/ai-${tool.value.id}`),
+    replace: true,
+  });
+  if (isCreate.value) {
+    ElMessage.success("Create Success");
+  } else {
+    ElMessage.success("Update Success");
+  }
+};
+</script>
+<template>
+  <div relative>
+    <h2 text-xl>
+      {{ isCreate ? "Create" : "Update" }} GPT tool ({{ step + 1 }}/{{
+        maxStep
+      }})
+    </h2>
+    <CreateTheInfo v-if="step === 0" />
+    <CreateTheForms v-else-if="step === 1" />
+    <CreateTheRole v-else-if="step === 2" />
+    <el-button :disabled="step === 0" size="default" @click="prevStep">
+      Prev
+    </el-button>
+    <el-button
+      v-if="step + 1 === maxStep"
+      type="primary"
+      size="default"
+      @click="handleSave"
+    >
+      Done
+    </el-button>
+    <el-button v-else type="primary" size="default" @click="nextStep">
+      Next
+    </el-button>
+  </div>
+</template>

components/create/CreatePreviews.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const { tool, step } = useCreateTool();
+</script>
+<template>
+  <div flex items-center justify-center w-full h-full>
+    <CreatePreviewTransition name="remove" mode="out-in">
+      <ToolItem max-w-120 flex-1 v-if="step === 0" :tool="tool" />
+      <Card max-w-2xl flex-1 v-else-if="step === 1">
+        <ToolForms readonly :tool="tool" />
+      </Card>
+      <Card max-w-2xl flex-1 v-else-if="step === 2">
+        <ToolHeader :tool="tool" />
+        <ToolForms :tool="tool" />
+        <ToolRequestPreview :tool="tool" />
+      </Card>
+    </CreatePreviewTransition>
+  </div>
+</template>

components/create/CreateTheForms.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { v4 as uuidv4 } from "uuid";
+
+const { tool } = useCreateTool();
+const formTypes = [
+  {
+    value: "ElInput",
+    name: "Input",
+  },
+];
+function insertForm(index: number) {
+  tool.value.forms?.splice(index + 1, 0, {
+    id: uuidv4(),
+    props: {},
+    name: `message${tool.value.forms.length}`,
+    type: "ElInput",
+  });
+}
+function removeForm(index: number) {
+  tool.value.forms?.splice(index, 1);
+}
+function stop(event: MouseEvent) {
+  // @ts-ignore
+  if (event?.target?.id !== "expand") {
+    event.stopPropagation();
+  }
+}
+</script>
+
+<template>
+  <h3 mb-2 text text-gray>The Forms</h3>
+  <el-form label-position="top" size="large">
+    <el-collapse accordion>
+      <CreateListTransition name="list">
+        <el-collapse-item v-for="(item, index) in tool.forms" :key="item.id">
+          <template #title>
+            <el-form-item flex-1 @click="stop">
+              <el-input v-model="item.name" placeholder="Please input name">
+                <template #append>
+                  <el-button id="expand">
+                    <el-icon id="expand" class="i-carbon:row-expand"></el-icon>
+                  </el-button>
+                </template>
+              </el-input>
+              <template #label>
+                <div w-full flex items-center justify-between>
+                  <div>Name</div>
+                  <div>
+                    <el-button
+                      @click="insertForm(index)"
+                      round
+                      size="small"
+                      type="primary"
+                    >
+                      <el-icon class="i-carbon:add-alt mr-1"></el-icon> Insert
+                    </el-button>
+                    <el-button
+                      @click="removeForm(index)"
+                      :disabled="tool.forms?.length === 1"
+                      round
+                      size="small"
+                      type="danger"
+                    >
+                      <el-icon class="i-carbon:subtract-alt mr-1"></el-icon>
+                      Delete
+                    </el-button>
+                  </div>
+                </div>
+              </template>
+            </el-form-item>
+          </template>
+          <div>
+            <el-form-item label="Label">
+              <el-input
+                v-model="item.lable"
+                placeholder="Please input label"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="Type">
+              <el-select
+                placeholder="Please select type"
+                w-full
+                v-model="item.type"
+              >
+                <el-option
+                  v-for="opt in formTypes"
+                  :key="opt.value"
+                  :value="opt.value"
+                  :label="opt.name"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-divider> Props </el-divider>
+            <el-form size="large" v-if="item.props">
+              <el-form-item v-if="item.type === 'ElInput'" label="Input Type">
+                <el-select
+                  placeholder="Select input type"
+                  w-full
+                  clearable
+                  v-model="item.props.type"
+                >
+                  <el-option value="textarea"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item label="Placeholder">
+                <el-input
+                  placeholder="Please input placeholder"
+                  v-model="item.props.placeholder"
+                ></el-input>
+              </el-form-item>
+              <el-form-item label="Default">
+                <el-input
+                  placeholder="Please input default value"
+                  v-model="item.props.default"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-collapse-item>
+      </CreateListTransition>
+    </el-collapse>
+  </el-form>
+</template>
+
+<style>
+.el-collapse {
+  --el-collapse-header-height: auto;
+  --el-collapse-border-color: transparent;
+}
+.el-collapse-item__arrow {
+  display: none;
+}
+.el-form-item__label {
+  padding-right: 0;
+}
+.el-collapse-item__header .el-form-item {
+  margin-bottom: 0;
+}
+.el-collapse-item__header {
+  margin-bottom: 1rem;
+}
+</style>