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

package/dist/wysiwyg.css

@@ -647,60 +647,61 @@
     color: rgb(var(--zw-color-white));
 }
 
-.zw-ai-component__suggestion[data-v-3b3df0c3] {
+.zw-ai-component__suggestion[data-v-6652f513] {
     font-size: 14px;
     margin-bottom: 8px;
     padding: 16px 8px;
     color: #CDD1DC;
     border-radius: 2px;
 }
-.zw-ai-component-suggestion__request[data-v-3b3df0c3] {
+.zw-ai-component-suggestion__request[data-v-6652f513] {
     font-size: 12px;
     color: #666;
 }
-.zw-ai-component-suggestion__button[data-v-3b3df0c3] {
+.zw-ai-component-suggestion__button[data-v-6652f513] {
     font-size: 14px;
     padding: 4px 8px;
     background-color: #A4A4A4;
     color: #FFF;
     border-radius: 2px;
+    margin-right: 8px;
 }
-.zw-ai-component-suggestion__button[data-v-3b3df0c3]:hover {
+.zw-ai-component-suggestion__button[data-v-6652f513]:hover {
     opacity: 0.8;
     background-color: #3AAA35;
 }
 
-.zw-selectors[data-v-5281be82] {
+.zw-selectors[data-v-869120f8] {
     display: flex;
 }
-.zw-ai__dropdown[data-v-5281be82] {
+.zw-ai__dropdown[data-v-869120f8] {
     width: 100%;
 }
 
-.zw-suggestion-modal[data-v-5714b6dc] {
+.zw-suggestion-modal[data-v-e7ed0c94] {
     width: 500px;
 }
-.zw-link-modal__body[data-v-5714b6dc] {
+.zw-link-modal__body[data-v-e7ed0c94] {
     padding: var(--zw-offset-sm);
 }
-.zw-generated-text__suggestion[data-v-5714b6dc] {
+.zw-generated-text__suggestion[data-v-e7ed0c94] {
     font-size: 14px;
     color: #908E8E;
 }
-.zw-ai-component__send-button[data-v-5714b6dc] {
+.zw-ai-component__send-button[data-v-e7ed0c94] {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: 16px;
 }
-.zw-ai-component__icon[data-v-5714b6dc] {
+.zw-ai-component__icon[data-v-e7ed0c94] {
     color: #CDD1DC;
 }
-.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-5714b6dc] {
+.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-e7ed0c94] {
     color: #878DA2;
     transition: color 0.1s ease-in-out;
 }
-.zw-field__label[data-v-5714b6dc] {
+.zw-field__label[data-v-e7ed0c94] {
     display: inline-block;
     font-size: var(--zw-font-size-xxs);
     padding-bottom: var(--zw-offset-xxs);
@@ -811,27 +812,27 @@
     opacity: 0.8;
 }
 
-.zw-floating-menu__button[data-v-88889ea8] {
+.zw-floating-menu__button[data-v-62b796d5] {
     padding: 2px;
     background-color: rgba(255, 252, 252, 1);
     border-radius: 50%;
     box-shadow: 0 0 0 0 1px #878DA2;
 }
-.zw-link-modal[data-v-88889ea8] {
+.zw-link-modal[data-v-62b796d5] {
     width: 450px;
     background-color: #FCFCFC;
     border-radius: 8px;
     box-shadow: 0 0 0 0.5px #878DA2, 0 0 2px 0.5px rgba(135, 141, 162, 0.5), 0 1px 8px 0.5px rgba(135, 141, 162, 0.1), 0 2px 12px 0.5px rgba(135, 141, 162, 0.1), 0 4px 20 0.5px rgba(135, 141, 162, 0.25);
 }
-.zw-link-modal__body[data-v-88889ea8] {
+.zw-link-modal__body[data-v-62b796d5] {
     padding: var(--zw-offset-sm);
 }
-.zw-link-form__body[data-v-88889ea8] {
+.zw-link-form__body[data-v-62b796d5] {
     overscroll-behavior: contain;
     overflow: auto;
     max-height: max(min(calc(1051.21px - calc(calc(3.5px * 16) + 47.9844px) - calc(0.25px * 16)), calc(34.75px * 16)), calc(10px * 16));
 }
-.zw-ai-component__selected-text[data-v-88889ea8] {
+.zw-ai-component__selected-text[data-v-62b796d5] {
     font-size: 14px;
     margin-bottom: 8px;
     padding: 16px 8px;
@@ -839,7 +840,7 @@
     border: 0.5px solid #000;
     border-radius: 2px;
 }
-.zw-ai-component__input[data-v-88889ea8] {
+.zw-ai-component__input[data-v-62b796d5] {
     width: 100%;
     min-height: 40px;
     border: 1px solid #E9E9E9;
@@ -847,16 +848,16 @@
     padding: 8px;
     font-size: 14px;
 }
-.zw-ai-component__send-button[data-v-88889ea8] {
+.zw-ai-component__send-button[data-v-62b796d5] {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: 16px;
 }
-.zw-ai-component__icon[data-v-88889ea8] {
+.zw-ai-component__icon[data-v-62b796d5] {
     color: #CDD1DC;
 }
-.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-88889ea8] {
+.zw-ai-component__send-button:hover .zw-ai-component__icon[data-v-62b796d5] {
     color: #878DA2;
     transition: color 0.1s ease-in-out;
 }

package/dist/wysiwyg.mjs

@@ -27774,10 +27774,40 @@ var render$e = function __render__38() {
     },
     on: {
       "click": function click($event) {
-        return _vm.sendAction("Rewrite text");
+        return _vm.sendAction($event, "Rewrite text");
       }
     }
-  }, [_vm._v(" ✍ Rewrite text ")]) : _vm._e()], 1);
+  }, [_vm._v(" Rewrite ")]) : _vm._e(), !_vm.isLoading ? _c("Button", {
+    staticClass: "zw-ai-component-suggestion__button",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.sendAction($event, "Simplify it");
+      }
+    }
+  }, [_vm._v(" Simplify it ")]) : _vm._e(), !_vm.isLoading ? _c("Button", {
+    staticClass: "zw-ai-component-suggestion__button",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.sendAction($event, "Shorten it");
+      }
+    }
+  }, [_vm._v(" Shorten it ")]) : _vm._e(), !_vm.isLoading ? _c("Button", {
+    staticClass: "zw-ai-component-suggestion__button",
+    attrs: {
+      "type": "button"
+    },
+    on: {
+      "click": function click($event) {
+        return _vm.sendAction($event, "Make it exciting");
+      }
+    }
+  }, [_vm._v(" Make it exciting ")]) : _vm._e()], 1);
 };
 var staticRenderFns$e = [];
 const AiSuggestionItem_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -27794,7 +27824,8 @@ const __vue2_script$e = {
   },
   setup(props, { emit }) {
     const isLoading = computed(() => props.suggestion.state === "loading");
-    const sendAction = (action) => {
+    const sendAction = (event, action) => {
+      event.stopPropagation();
       emit("action", action);
     };
     return {
@@ -27810,7 +27841,7 @@ var __component__$e = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$e,
   false,
   __vue2_injectStyles$e,
-  "3b3df0c3",
+  "6652f513",
   null,
   null
 );
@@ -27826,7 +27857,7 @@ var render$d = function __render__39() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", {
+  return _c("div", [_c("h4", [_vm._v("Settings")]), _c("div", {
     staticClass: "zw-selectors"
   }, [_c("div", {
     staticClass: "zw-ai__dropdown zw-margin-right--xs"
@@ -27906,7 +27937,16 @@ var render$d = function __render__39() {
         })];
       }
     }])
-  })], 1)]);
+  })], 1)]), _c("Checkbox", {
+    staticClass: "zw-margin-bottom--sm",
+    attrs: {
+      "label": "Use block context",
+      "value": _vm.settings.useBlockContext
+    },
+    on: {
+      "input": _vm.changUseBlockContext
+    }
+  })], 1);
 };
 var staticRenderFns$d = [];
 const AiSettings_vue_vue_type_style_index_0_scoped_true_lang = "";
@@ -27915,7 +27955,8 @@ const __vue2_script$d = {
   components: {
     FieldLabel,
     Dropdown,
-    DropdownOption
+    DropdownOption,
+    Checkbox
   },
   props: {
     value: {
@@ -27928,7 +27969,8 @@ const __vue2_script$d = {
       return {
         tone: props.value.tone,
         textStyle: props.value.textStyle,
-        textLength: props.value.textLength
+        textLength: props.value.textLength,
+        useBlockContext: props.value.useBlockContext
       };
     });
     const editor = inject(InjectionTokens$1.EDITOR);
@@ -27947,6 +27989,10 @@ const __vue2_script$d = {
       settings.value.textLength = value;
       emit("input", settings.value);
     };
+    const changUseBlockContext = (value) => {
+      settings.value.useBlockContext = value;
+      emit("input", settings.value);
+    };
     return {
       tones,
       textStyles,
@@ -27954,6 +28000,7 @@ const __vue2_script$d = {
       changeTone,
       changeTextStyle,
       changeTextLength,
+      changUseBlockContext,
       settings
     };
   }
@@ -27965,7 +28012,7 @@ var __component__$d = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$d,
   false,
   __vue2_injectStyles$d,
-  "5281be82",
+  "869120f8",
   null,
   null
 );
@@ -28029,6 +28076,9 @@ var render$c = function __render__40() {
   }) : _vm.lastSuggestions ? _c("AiSuggestionItem", {
     attrs: {
       "suggestion": _vm.lastSuggestions
+    },
+    on: {
+      "action": _vm.onAction
     }
   }) : _vm._e(), _c("label", {
     staticClass: "zw-field__label"
@@ -28099,7 +28149,8 @@ const __vue2_script$c = {
     const settings = ref({
       tone: "",
       textLength: "500",
-      textStyle: ""
+      textStyle: "",
+      useBlockContext: false
     });
     if (localStorage.getItem("ai-settings")) {
       settings.value = JSON.parse(localStorage.getItem("ai-settings"));
@@ -28147,7 +28198,8 @@ const __vue2_script$c = {
       suggestions.value.push(result);
     };
     const applyText = () => {
-      editor.commands.setContent(lastSuggestions.value.content);
+      editor.commands.clearContent(true);
+      editor.commands.insertContent(lastSuggestions.value.content);
       toggler.close();
       suggestions.value = [];
       prompt.value = "";
@@ -28176,7 +28228,7 @@ var __component__$c = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$c,
   false,
   __vue2_injectStyles$c,
-  "5714b6dc",
+  "e7ed0c94",
   null,
   null
 );
@@ -29385,6 +29437,17 @@ const __vue2_script$1 = {
     const prompt = ref("");
     const isLoading = ref(false);
     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";
     });
@@ -29406,7 +29469,11 @@ const __vue2_script$1 = {
       isLoading.value = true;
       const lastSuggestions = suggestions.value[suggestions.value.length - 1];
       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);
     };
@@ -29439,7 +29506,7 @@ var __component__$1 = /* @__PURE__ */ normalizeComponent(
   staticRenderFns$1,
   false,
   __vue2_injectStyles$1,
-  "88889ea8",
+  "62b796d5",
   null,
   null
 );

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

@@ -10,7 +10,11 @@
 
                 <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"
+                    @action="onAction"
+                />
 
                 <label class="zw-field__label">
                     {{ textAreaLabel }}
@@ -70,7 +74,8 @@ export default {
         const settings = ref({
             tone: '',
             textLength: '500',
-            textStyle: ''
+            textStyle: '',
+            useBlockContext: false
         });
 
         if (localStorage.getItem('ai-settings')) {
@@ -133,7 +138,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 = '';

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

@@ -1,73 +1,82 @@
 <template>
-    <div class="zw-selectors">
-        <div class="zw-ai__dropdown zw-margin-right--xs">
-            <FieldLabel class="zw-margin-bottom--xxs">
-                Tone
-            </FieldLabel>
+    <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>
+                <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>
+            <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>
+                <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>
+            <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>
+                <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 } from '../../../base';
+import { FieldLabel, Dropdown, DropdownOption, Checkbox } from '../../../base';
 import { InjectionTokens } from '../../../../injectionTokens';
 
 export default {
@@ -76,7 +85,8 @@ export default {
     components: {
         FieldLabel,
         Dropdown,
-        DropdownOption
+        DropdownOption,
+        Checkbox
     },
 
     props: {
@@ -91,7 +101,8 @@ export default {
             return {
                 tone: props.value.tone,
                 textStyle: props.value.textStyle,
-                textLength: props.value.textLength
+                textLength: props.value.textLength,
+                useBlockContext: props.value.useBlockContext
             };
         });
 
@@ -112,6 +123,10 @@ export default {
             settings.value.textLength = value;
             emit('input', settings.value);
         };
+        const changUseBlockContext = (value) => {
+            settings.value.useBlockContext = value;
+            emit('input', settings.value);
+        };
 
         return {
             tones,
@@ -120,6 +135,7 @@ export default {
             changeTone,
             changeTextStyle,
             changeTextLength,
+            changUseBlockContext,
             settings
         };
     }

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

@@ -5,8 +5,17 @@
         </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>
@@ -32,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);
         };
 
@@ -64,6 +74,7 @@ export default {
     background-color: #A4A4A4;
     color: #FFF;
     border-radius: 2px;
+    margin-right: 8px;
 }
 
 .zw-ai-component-suggestion__button:hover {

package/package.json

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