@zipify/wysiwyg 3.5.1-ai-prototype → 3.5.3-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) {
@@ -18,5 +18,35 @@ export const aiAdapter = {
             // 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/floatingMenu/FloatingMenuControl.vue

@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { inject, ref, unref, computed } from 'vue';
+import { inject, ref, unref, computed, watch } from 'vue';
 import { FloatingMenu } from '@tiptap/vue-2';
 import { Button, Icon, Modal, useModalToggler } from '../base';
 import { InjectionTokens } from '../../injectionTokens';
@@ -83,6 +83,20 @@ export default {
 
         const selectedText = computed(() => editor.commands.getSelectedText());
 
+        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 iconName = computed(() => {
             return unref(isLoading) ? 'loading' : 'send';
         });
@@ -111,7 +125,11 @@ export default {
 
             const context = lastSuggestions ? lastSuggestions.content : selectedText.value;
 
-            const result = await editor.commands.generateText({ prompt: prompt.value, context });
+            const result = await editor.commands.generateText({
+                prompt: prompt.value,
+                instructions: unref(settings),
+                context
+            });
 
             isLoading.value = false;
             suggestions.value.push(result);

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

@@ -5,18 +5,15 @@
         </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"
+                    @action="onAction"
                 />
 
                 <label class="zw-field__label">
@@ -24,32 +21,30 @@
                 </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 +55,8 @@ export default {
         Button,
         TextArea,
         AiControlHeader,
-        AiSuggestionItem
+        AiSuggestionItem,
+        AiSettings
     },
 
     directives: {
@@ -75,6 +71,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 +93,7 @@ export default {
 
         const editor = inject(InjectionTokens.EDITOR);
 
-        const onBeforeOpened = () => {};
+        const onBeforeOpened = () => { };
 
         const toggler = useModalToggler({
             onBeforeOpened: () => onBeforeOpened(),
@@ -97,23 +107,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 = '';
@@ -121,7 +137,8 @@ export default {
         };
 
         const applyText = () => {
-            editor.commands.setContent(lastSuggestions.value.content);
+            editor.commands.clearContent(true);
+            editor.commands.insertContent(lastSuggestions.value.content);
             toggler.close();
             suggestions.value = [];
             prompt.value = '';
@@ -140,7 +157,8 @@ export default {
             textAreaLabel,
             isLoading,
             onAction,
-            applyText
+            applyText,
+            settings
         };
     }
 };

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

@@ -0,0 +1,153 @@
+<template>
+    <div>
+        <h4>Settings</h4>
+        <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>
+        <Checkbox
+            class="zw-margin-bottom--sm"
+            label="Use block context"
+            :value="settings.useBlockContext"
+            @input="changUseBlockContext"
+        />
+    </div>
+</template>
+
+<script>
+import { computed, inject } from 'vue';
+import { FieldLabel, Dropdown, DropdownOption, Checkbox } from '../../../base';
+import { InjectionTokens } from '../../../../injectionTokens';
+
+export default {
+    name: 'AiSettings',
+
+    components: {
+        FieldLabel,
+        Dropdown,
+        DropdownOption,
+        Checkbox
+    },
+
+    props: {
+        value: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+
+    setup(props, { emit }) {
+        const settings = computed(() => {
+            return {
+                tone: props.value.tone,
+                textStyle: props.value.textStyle,
+                textLength: props.value.textLength,
+                useBlockContext: props.value.useBlockContext
+            };
+        });
+
+        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);
+        };
+        const changUseBlockContext = (value) => {
+            settings.value.useBlockContext = value;
+            emit('input', settings.value);
+        };
+
+        return {
+            tones,
+            textStyles,
+            textLength,
+            changeTone,
+            changeTextStyle,
+            changeTextLength,
+            changUseBlockContext,
+            settings
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-selectors {
+    display: flex;
+}
+
+.zw-ai__dropdown {
+    width: 100%;
+}
+</style>

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

@@ -5,16 +5,24 @@
         </p>
         <p :class="{'zw-margin-bottom--sm': !isLoading }" v-html="suggestion.content" />
 
-        <Button type="button" v-if="!isLoading" @click="sendAction('Rewrite text')" class="zw-ai-component-suggestion__button">
-            ✍ Rewrite text
+        <Button type="button" v-if="!isLoading" @click="sendAction($event, 'Rewrite text')" class="zw-ai-component-suggestion__button">
+            Rewrite
+        </Button>
+        <Button type="button" v-if="!isLoading" @click="sendAction($event, 'Simplify it')" class="zw-ai-component-suggestion__button">
+            Simplify it
+        </Button>
+        <Button type="button" v-if="!isLoading" @click="sendAction($event, 'Shorten it')" class="zw-ai-component-suggestion__button">
+            Shorten it
+        </Button>
+        <Button type="button" v-if="!isLoading" @click="sendAction($event, 'Make it exciting')" class="zw-ai-component-suggestion__button">
+            Make it exciting
         </Button>
     </div>
 </template>
 
 <script>
-import { inject, computed } from 'vue';
+import { computed } from 'vue';
 import { Button } from '../../../base';
-import { InjectionTokens } from '../../../../injectionTokens';
 
 export default {
     name: 'AiSuggestionItem',
@@ -33,7 +41,8 @@ export default {
     setup(props, { emit }) {
         const isLoading = computed(() => props.suggestion.state === 'loading');
 
-        const sendAction = (action) => {
+        const sendAction = (event, action) => {
+            event.stopPropagation();
             emit('action', action);
         };
 
@@ -65,6 +74,7 @@ export default {
     background-color: #A4A4A4;
     color: #FFF;
     border-radius: 2px;
+    margin-right: 8px;
 }
 
 .zw-ai-component-suggestion__button:hover {

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.1-ai-prototype",
+  "version": "3.5.3-ai-prototype",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "bin": {