@zipify/wysiwyg 3.5.0-ai-prototype → 3.5.2-ai-prototype

package/example/aiAdapter.js

@@ -1,12 +1,12 @@
 export const aiAdapter = {
-    generateText: async ({ prompt, context, istruction }) => {
+    generateText: async ({ prompt, context, instructions }) => {
         try {
             const response = await fetch('https://mendelson-test.eu.ngrok.io/process-text', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ text: prompt, context })
+                body: JSON.stringify({ text: prompt, context, instructions })
             });
 
             if (!response.ok) {
@@ -15,7 +15,38 @@ export const aiAdapter = {
 
             return await response.json();
         } catch (error) {
+            // eslint-disable-next-line no-console
             console.error('An error occurred while sending the request:', error);
         }
+    },
+
+    settings: {
+        tones: [
+            { id: 'expert', title: 'Expert' },
+            { id: 'daring', title: 'Daring' },
+            { id: 'playful', title: 'Playful' },
+            { id: 'sophisticated', title: 'Sophisticated' },
+            { id: 'Persuasive', title: 'Persuasive' },
+            { id: 'supportive', title: 'Supportive' },
+            { id: 'personable', title: 'Personable' },
+            { id: 'direct', title: 'Direct' },
+            { id: 'empathetic', title: 'Empathetic' },
+            { id: 'engaging', title: 'Engaging' },
+            { id: 'neutral', title: 'Neutral' }
+        ],
+        textStyles: [
+            { id: 'formal', title: 'Formal' },
+            { id: 'informal', title: 'Informal' },
+            { id: 'technical', title: 'Technical' },
+            { id: 'persuasive', title: 'Persuasive' },
+            { id: 'promotional', title: 'Promotional' },
+            { id: 'product description', title: 'Product description' },
+            { id: 'befits', title: 'Befits' }
+        ],
+        textLength: [
+            { id: '200', title: 'Short (200)' },
+            { id: '500', title: 'Medium (500)' },
+            { id: '1000', title: 'Long (1000)' }
+        ]
     }
 };

package/lib/components/toolbar/controls/aiComponent/AiControl.vue

@@ -5,51 +5,42 @@
         </Button>
 
         <Modal class="zw-suggestion-modal" :toggler="toggler" ref="modalRef" focus-first-control>
-
             <AiControlHeader />
             <form class="zw-link-modal__body" @submit.prevent="generateText">
 
-                <AiSuggestionItem
-                    v-if="isLoading"
-                    :suggestion="{ content: 'Working on it...', state: 'loading' }"
-                />
+                <Icon v-if="isLoading" auto-color class="zw-ai-component__icon" name="loading" size="32px" />
 
-                <AiSuggestionItem
-                    v-else-if="lastSuggestions"
-                    :suggestion="lastSuggestions"
-                />
+                <AiSuggestionItem v-else-if="lastSuggestions" :suggestion="lastSuggestions" />
 
                 <label class="zw-field__label">
                     {{ textAreaLabel }}
                 </label>
 
                 <div class="zw-position--relative">
-                    <TextArea
-                        class="zw-margin-bottom--sm"
-                        v-model="prompt"
-                    />
+                    <TextArea class="zw-margin-bottom--sm" v-model="prompt" />
                     <Button type="submit" class="zw-ai-component__send-button">
                         <Icon auto-color class="zw-ai-component__icon" name="send" size="32px" />
                     </Button>
                 </div>
 
+                <AiSettings v-model="settings" />
+
                 <Button :disabled="!lastSuggestions" type="button" skin="primary" @click="applyText">
                     Apply
                 </Button>
             </form>
-
-
         </Modal>
     </div>
 </template>
 
 <script>
-import { computed, ref, inject, unref } from 'vue';
+import { computed, ref, inject, unref, watch } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { tooltip } from '../../../../directives';
 import { Button, Icon, Modal, TextArea, useModalToggler } from '../../../base';
 import AiControlHeader from './AiControlHeader';
 import AiSuggestionItem from './AiSuggestionItem';
+import AiSettings from './AiSettings';
 
 export default {
     name: 'AiControl',
@@ -60,7 +51,8 @@ export default {
         Button,
         TextArea,
         AiControlHeader,
-        AiSuggestionItem
+        AiSuggestionItem,
+        AiSettings
     },
 
     directives: {
@@ -75,6 +67,20 @@ export default {
         const suggestions = ref([]);
         const isLoading = ref(false);
 
+        const settings = ref({
+            tone: '',
+            textLength: '500',
+            textStyle: ''
+        });
+
+        if (localStorage.getItem('ai-settings')) {
+            settings.value = JSON.parse(localStorage.getItem('ai-settings'));
+        }
+
+        watch(settings, () => {
+            localStorage.setItem('ai-settings', JSON.stringify(settings.value));
+        });
+
         const textAreaLabel = computed(() => {
             return suggestions.value.length ? 'Tell AI what to do next…' : 'Write you request';
         });
@@ -83,7 +89,7 @@ export default {
 
         const editor = inject(InjectionTokens.EDITOR);
 
-        const onBeforeOpened = () => {};
+        const onBeforeOpened = () => { };
 
         const toggler = useModalToggler({
             onBeforeOpened: () => onBeforeOpened(),
@@ -97,23 +103,29 @@ export default {
             const lastSuggestions = suggestions.value[suggestions.value.length - 1];
 
             const context = lastSuggestions ? lastSuggestions.content : '';
-
-            const result = await editor.commands.generateText({ prompt: action, context });
+            const result = await editor.commands.generateText({
+                prompt: action,
+                context,
+                instructions: unref(settings)
+            });
 
             isLoading.value = false;
             suggestions.value.push(result);
         };
 
         const generateText = async () => {
-            if(isLoading.value) return;
+            if (isLoading.value) return;
 
             isLoading.value = true;
 
             const lastSuggestions = suggestions.value[suggestions.value.length - 1];
 
             const context = lastSuggestions ? lastSuggestions.content : '';
-
-            const result = await editor.commands.generateText({ prompt: prompt.value, context });
+            const result = await editor.commands.generateText({
+                prompt: prompt.value,
+                context,
+                instructions: unref(settings)
+            });
 
             isLoading.value = false;
             prompt.value = '';
@@ -140,7 +152,8 @@ export default {
             textAreaLabel,
             isLoading,
             onAction,
-            applyText
+            applyText,
+            settings
         };
     }
 };

package/lib/components/toolbar/controls/aiComponent/AiSettings.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="zw-selectors">
+        <div class="zw-ai__dropdown zw-margin-right--xs">
+            <FieldLabel class="zw-margin-bottom--xxs">
+                Tone
+            </FieldLabel>
+
+            <Dropdown
+                class="zw-margin-bottom--sm"
+                color="gray"
+                :value="settings.tone"
+                :options="tones"
+                @change="changeTone"
+            >
+                <template #option="{ option }">
+                    <DropdownOption
+                        class="zw-link-modal-dropdown__option"
+                        :option="option"
+                    />
+                </template>
+            </Dropdown>
+        </div>
+
+        <div class="zw-ai__dropdown zw-margin-right--xs ">
+            <FieldLabel class="zw-margin-bottom--xxs">
+                Text Style
+            </FieldLabel>
+
+            <Dropdown
+                class="zw-margin-bottom--sm"
+                color="gray"
+                :value="settings.textStyle"
+                :options="textStyles"
+                @change="changeTextStyle"
+            >
+                <template #option="{ option }">
+                    <DropdownOption
+                        class="zw-link-modal-dropdown__option"
+                        :option="option"
+                    />
+                </template>
+            </Dropdown>
+        </div>
+
+        <div class="zw-ai__dropdown">
+            <FieldLabel class="zw-margin-bottom--xxs">
+                Length
+            </FieldLabel>
+
+            <Dropdown
+                class="zw-margin-bottom--sm"
+                color="gray"
+                :value="settings.textLength"
+                :options="textLength"
+                @change="changeTextLength"
+            >
+                <template #option="{ option }">
+                    <DropdownOption
+                        class="zw-link-modal-dropdown__option"
+                        :option="option"
+                    />
+                </template>
+            </Dropdown>
+        </div>
+    </div>
+</template>
+
+<script>
+import { computed, inject } from 'vue';
+import { FieldLabel, Dropdown, DropdownOption } from '../../../base';
+import { InjectionTokens } from '../../../../injectionTokens';
+
+export default {
+    name: 'AiSettings',
+
+    components: {
+        FieldLabel,
+        Dropdown,
+        DropdownOption
+    },
+
+    props: {
+        value: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+
+    setup(props, { emit }) {
+        const settings = computed(() => {
+            return {
+                tone: props.value.tone,
+                textStyle: props.value.textStyle,
+                textLength: props.value.textLength
+            };
+        });
+
+        const editor = inject(InjectionTokens.EDITOR);
+        const tones = editor.commands.getAiSettings().tones;
+        const textStyles = editor.commands.getAiSettings().textStyles;
+        const textLength = editor.commands.getAiSettings().textLength;
+
+        const changeTone = (value) => {
+            settings.value.tone = value;
+            emit('input', settings.value);
+        };
+        const changeTextStyle = (value) => {
+            settings.value.textStyle = value;
+            emit('input', settings.value);
+        };
+        const changeTextLength = (value) => {
+            settings.value.textLength = value;
+            emit('input', settings.value);
+        };
+
+        return {
+            tones,
+            textStyles,
+            textLength,
+            changeTone,
+            changeTextStyle,
+            changeTextLength,
+            settings
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-selectors {
+    display: flex;
+}
+
+.zw-ai__dropdown {
+    width: 100%;
+}
+</style>

package/lib/components/toolbar/controls/aiComponent/AiSuggestionItem.vue

@@ -12,9 +12,8 @@
 </template>
 
 <script>
-import { inject, computed } from 'vue';
+import { computed } from 'vue';
 import { Button } from '../../../base';
-import { InjectionTokens } from '../../../../injectionTokens';
 
 export default {
     name: 'AiSuggestionItem',

package/lib/extensions/AiComponent.js

@@ -1,17 +1,18 @@
-import { toRef } from 'vue';
 import { Extension } from '@tiptap/vue-2';
 import { createCommand } from '../utils';
 
 export const AiComponent = Extension.create({
-    name: 'device_manager',
+    name: 'ai_component',
 
     addCommands() {
         return {
-            // _getAiAdapter: createCommand(() => toRef(this.options, 'device'))
+            getAiSettings: createCommand(() => {
+                return this.options.aiComponent.settings;
+            }),
 
-            generateText: createCommand(async ({ commands }, { prompt, context }) => {
+            generateText: createCommand(async ({ commands }, { prompt, context, instructions }) => {
                 const aiComponent = this.options.aiComponent;
-                const result = await aiComponent.generateText({ prompt, context });
+                const result = await aiComponent.generateText({ prompt, context, instructions });
 
                 result.content = result.content.replace(/\n/g, '');
                 return result;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "3.5.0-ai-prototype",
+  "version": "3.5.2-ai-prototype",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {