Merge b5df0b8c7f into 07eea0f484

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     '404.page': typeof import('./src/pages/404.page.vue')['default']
     About: typeof import('./src/pages/About.vue')['default']
+    AiPromptSplitter: typeof import('./src/tools/ai-prompt-splitter/ai-prompt-splitter.vue')['default']
     App: typeof import('./src/App.vue')['default']
     AsciiTextDrawer: typeof import('./src/tools/ascii-text-drawer/ascii-text-drawer.vue')['default']
     'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
@@ -135,14 +136,15 @@ declare module '@vue/runtime-core' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NSpace: typeof import('naive-ui')['NSpace']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

package.json

@@ -54,6 +54,7 @@
     "@vueuse/router": "^10.0.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
+    "chatgpt-prompt-splitter": "^1.0.5",
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
     "country-code-lookup": "^0.1.0",

src/modules/command-palette/command-palette.vue

@@ -128,7 +128,7 @@ function activateOption(option: PaletteOption) {
       <c-input-text ref="inputRef" v-model:value="searchPrompt" raw-text placeholder="Type to search a tool or a command..." autofocus clearable />
 
       <div v-for="(options, category) in filteredSearchResult" :key="category">
-        <div ml-3 mt-3 text-sm font-bold text-primary op-60>
+        <div ml-3 mt-3 text-sm text-primary font-bold op-60>
           {{ category }}
         </div>
         <command-palette-option v-for="option in options" :key="option.name" :option="option" :selected="selectedOptionIndex === getOptionIndex(option)" @activated="activateOption" />

src/tools/ai-prompt-splitter/ai-prompt-splitter.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import promptSplitter from 'chatgpt-prompt-splitter';
+import { useValidation } from '@/composable/validation';
+
+const prompt = ref('');
+const splitLength = ref(1024);
+
+const splittedPrompts = computed(() => {
+  try {
+    return promptSplitter({
+      prompt: prompt.value,
+      splitLength: splitLength.value,
+      newLine: true,
+    });
+  }
+  catch (e: any) {
+    return [e.toString()];
+  }
+});
+
+const promptValidation = useValidation({
+  source: prompt,
+  rules: [
+    {
+      validator: v => v !== '',
+      message: 'Prompt must not be empty',
+    },
+  ],
+});
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Prompt and options" mb-2>
+      <c-input-text
+        v-model:value="prompt"
+        label="Full Prompt"
+        multiline
+        placeholder="Put your full prompt here..."
+        rows="10"
+        :validation="promptValidation"
+        mb-2
+      />
+      <n-form-item label="Character length for each chunk">
+        <n-input-number v-model:value="splitLength" :min="1" />
+      </n-form-item>
+    </c-card>
+
+    <c-card title="Divided prompts">
+      <div v-for="(splittedPrompt, index) in splittedPrompts" :key="index">
+        <TextareaCopyable :value="splittedPrompt" />
+      </div>
+    </c-card>
+  </div>
+</template>

src/tools/ai-prompt-splitter/chatgpt-prompt-splitter.d.ts

@@ -0,0 +1,7 @@
+declare module "chatgpt-prompt-splitter" {
+    export default function promptSplitter(options: {
+        prompt: string
+        splitLength: number
+        newLine: boolean
+    }): Array<string>;
+}

src/tools/ai-prompt-splitter/index.ts

@@ -0,0 +1,12 @@
+import { Prompt } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'AI Prompt Splitter',
+  path: '/ai-prompt-splitter',
+  description: 'Split a long document to multiple chat (ie ChatGPT) prompts',
+  keywords: ['ai', 'chatgpt', 'gpt', 'prompt', 'splitter'],
+  component: () => import('./ai-prompt-splitter.vue'),
+  icon: Prompt,
+  createdAt: new Date('2024-07-14'),
+});

src/tools/index.ts

@@ -9,6 +9,7 @@ import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
 import { tool as xmlToJson } from './xml-to-json';
 import { tool as jsonToXml } from './json-to-xml';
+import { tool as aiPromptSplitter } from './ai-prompt-splitter';
 import { tool as regexTester } from './regex-tester';
 import { tool as regexMemo } from './regex-memo';
 import { tool as markdownToHtml } from './markdown-to-html';
@@ -183,6 +184,7 @@ export const toolsByCategory: ToolCategory[] = [
       stringObfuscator,
       textDiff,
       numeronymGenerator,
+      aiPromptSplitter,
       asciiTextDrawer,
     ],
   },

src/ui/c-select/c-select.vue

@@ -151,7 +151,7 @@ function onSearchInput() {
       >
         <div flex-1 truncate>
           <slot name="displayed-value">
-            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full lh-normal color-current @input="onSearchInput">
+            <input v-if="searchable && isOpen" ref="searchInputRef" v-model="searchQuery" type="text" placeholder="Search..." class="search-input" w-full color-current lh-normal @input="onSearchInput">
             <span v-else-if="selectedOption" lh-normal>
               {{ selectedOption.label }}
             </span>

src/ui/c-table/c-table.vue

@@ -39,7 +39,7 @@ const headers = computed(() => {
 <template>
   <div class="relative overflow-x-auto rounded">
     <table class="w-full border-collapse text-left text-sm text-gray-500 dark:text-gray-400" role="table" :aria-label="description">
-      <thead v-if="!hideHeaders" class="bg-#ffffff uppercase text-gray-700 dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
+      <thead v-if="!hideHeaders" class="bg-#ffffff text-gray-700 uppercase dark:bg-#333333 dark:text-gray-400" border-b="1px solid dark:transparent #efeff5">
         <tr>
           <th v-for="header in headers" :key="header.key" scope="col" class="px-6 py-3 text-xs">
             {{ header.label }}