@zipify/wysiwyg 3.4.1-dev → 3.5.0-ai-prototype

package/example/ExampleApp.vue

@@ -42,6 +42,7 @@
             :page-blocks="pageBlocks"
             :active="isActive"
             :readonly="isReadonly"
+            :ai-adapter="aiAdapterRef"
             @update-favorite-colors="updateFavoriteColors"
         />
         <pre class="zw-content-structure" v-html="structurePreview" />
@@ -54,6 +55,7 @@ import { Wysiwyg } from '../lib/entryLib';
 import { FONTS } from './fonts';
 import { PRESETS, renderPresetVariable } from './presets';
 import { PAGE_BLOCKS } from './pageBlocks';
+import { aiAdapter } from './aiAdapter';
 
 function getInitialContent() {
     const data = sessionStorage.getItem('wswg-data');
@@ -75,6 +77,7 @@ export default {
     },
 
     setup() {
+        const aiAdapterRef = ref(aiAdapter);
         const wswgRef = ref(null);
         const content = ref(getInitialContent());
         const presets = ref(PRESETS);
@@ -135,7 +138,8 @@ export default {
             presets,
             isActive,
             pageBlocks,
-            isReadonly
+            isReadonly,
+            aiAdapterRef
         };
     }
 };

package/example/aiAdapter.js

@@ -0,0 +1,21 @@
+export const aiAdapter = {
+    generateText: async ({ prompt, context, istruction }) => {
+        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 })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error: ${response.status}`);
+            }
+
+            return await response.json();
+        } catch (error) {
+            console.error('An error occurred while sending the request:', error);
+        }
+    }
+};

package/lib/Wysiwyg.vue

@@ -6,7 +6,7 @@
             :popup-mode="popupMode"
             ref="toolbarRef"
         />
-
+        <FloatingMenuControl />
         <EditorContent :editor="editor" />
     </div>
 </template>
@@ -22,6 +22,7 @@ import { ContextWindow, FavoriteColors, Storage } from './services';
 import { Devices } from './enums';
 import { outClick } from './directives';
 import { Font } from './models';
+import { FloatingMenuControl } from './components/floatingMenu';
 
 const MIN_FONT_SIZE = 5;
 const MAX_FONT_SIZE = 112;
@@ -31,7 +32,8 @@ export default {
 
     components: {
         Toolbar,
-        EditorContent
+        EditorContent,
+        FloatingMenuControl
     },
 
     directives: {
@@ -132,6 +134,12 @@ export default {
         window: {
             required: false,
             default: () => window
+        },
+
+        aiAdapter: {
+            type: Object,
+            required: false,
+            default: null
         }
     },
 
@@ -180,6 +188,7 @@ export default {
                 basePresetClass: props.basePresetClass,
                 baseListClass: props.baseListClass,
                 deviceRef: toRef(props, 'device'),
+                aiComponent: props.aiAdapter,
                 pageBlocksRef: pageBlocks,
                 wrapperRef
             })

package/lib/assets/icons/loading.svg

@@ -0,0 +1,11 @@
+<svg xml:space="preserve" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 100 100">
+  <circle cx="6" cy="50" r="6" fill="var(--zw-icon-foreground)">
+    <animateTransform attributeName="transform" begin=".1" dur="1s" repeatCount="indefinite" type="translate" values="0 15 ; 0 -15; 0 15"/>
+  </circle>
+  <circle cx="30" cy="50" r="6" fill="var(--zw-icon-foreground)">
+    <animateTransform attributeName="transform" begin=".2" dur="1s" repeatCount="indefinite" type="translate" values="0 10 ; 0 -10; 0 10"/>
+  </circle>
+  <circle cx="54" cy="50" r="6" fill="var(--zw-icon-foreground)">
+    <animateTransform attributeName="transform" begin=".3" dur="1s" repeatCount="indefinite" type="translate" values="0 5 ; 0 -5; 0 5"/>
+  </circle>
+</svg>

package/lib/assets/icons/send.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 24 24">
+  <path stroke="var(--zw-icon-foreground)" stroke-width="2" d="m7 10.2.4.8c.3.5.4.7.4 1 0 .3 0 .5-.4 1l-.4.8c-1.2 2.1-1.9 3.2-1.4 3.7.5.6 1.6 0 4-1l6.2-2.7c1.8-.8 2.7-1.1 2.7-1.8s-.9-1-2.7-1.8L9.5 7.4c-2.3-1-3.4-1.5-3.9-1-.5.6.2 1.7 1.4 3.8Z"/>
+</svg>

package/lib/assets/icons/sparkles.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#9c6ade" style="width:var(--zw-icon-width);height:var(--zw-icon-height)" viewBox="0 0 20 20">
+  <path d="M12.643 7.61c.124-.376.186-.564.288-.599a.216.216 0 0 1 .138 0c.102.035.164.223.288.6.519 1.577.778 2.366 1.268 2.991.225.288.485.548.773.773.625.49 1.414.75 2.991 1.268.377.124.565.186.6.288a.217.217 0 0 1 0 .138c-.035.102-.223.164-.6.288-1.577.519-2.366.778-2.991 1.268a4.53 4.53 0 0 0-.773.773c-.49.625-.75 1.414-1.268 2.991-.124.377-.186.565-.288.6a.217.217 0 0 1-.138 0c-.102-.035-.164-.223-.288-.6-.519-1.577-.778-2.366-1.268-2.991a4.53 4.53 0 0 0-.773-.773c-.625-.49-1.414-.75-2.991-1.268-.377-.124-.565-.186-.6-.288a.216.216 0 0 1 0-.138c.035-.102.223-.164.6-.288 1.577-.519 2.366-.778 2.991-1.268a4.53 4.53 0 0 0 .773-.773c.49-.625.75-1.414 1.268-2.991ZM4.762 4.407c.083-.251.124-.377.192-.4.03-.01.062-.01.092 0 .068.023.11.149.192.4.346 1.052.519 1.578.845 1.994.15.192.324.365.516.516.416.326.942.5 1.994.845.251.083.377.124.4.192.01.03.01.062 0 .092-.023.068-.149.11-.4.192-1.052.346-1.578.519-1.994.845-.192.15-.365.324-.516.516-.326.416-.5.942-.845 1.994-.083.251-.124.377-.192.4a.144.144 0 0 1-.092 0c-.068-.023-.11-.149-.192-.4-.346-1.052-.519-1.578-.845-1.994a3.022 3.022 0 0 0-.516-.516c-.416-.326-.942-.5-1.994-.845-.251-.083-.377-.124-.4-.192a.144.144 0 0 1 0-.092c.023-.068.149-.11.4-.192 1.052-.346 1.578-.519 1.994-.845.192-.15.365-.324.516-.516.326-.416.5-.942.845-1.994Zm5.589-3.153c.052-.157.078-.235.12-.25a.09.09 0 0 1 .058 0c.042.015.068.093.12.25.216.658.324.986.528 1.247.094.12.202.228.322.322.26.204.59.312 1.247.528.156.052.235.078.25.12a.089.089 0 0 1 0 .058c-.015.042-.094.068-.25.12-.658.216-.987.324-1.247.528-.12.094-.228.202-.322.322-.204.26-.312.59-.528 1.247-.052.156-.078.235-.12.25a.09.09 0 0 1-.058 0c-.042-.015-.068-.094-.12-.25-.216-.658-.324-.986-.528-1.247a1.888 1.888 0 0 0-.322-.322c-.26-.204-.59-.312-1.247-.528-.156-.052-.235-.078-.25-.12a.09.09 0 0 1 0-.058c.015-.042.094-.068.25-.12.658-.216.986-.324 1.247-.528.12-.094.228-.202.322-.322.204-.26.312-.59.528-1.247Z"/>
+</svg>

package/lib/components/base/TextArea.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="zw-field">
+        <label v-if="label" class="zw-field__label" :for="fieldId" data-test-selector="label">
+            {{ label }}
+        </label>
+
+        <textarea
+            class="zw-field__input"
+            :value="value"
+            :id="fieldId"
+            :placeholder="placeholder"
+            @input="onInput"
+            data-test-selector="input"
+        />
+
+        <p class="zw-field__label--error" v-if="error" data-test-selector="error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+    name: 'TextArea',
+
+    props: {
+        value: {
+            type: [Number, String],
+            required: true
+        },
+
+        label: {
+            type: String,
+            required: false,
+            default: ''
+        },
+
+        placeholder: {
+            type: String,
+            required: false,
+            default: ''
+        },
+
+        error: {
+            type: String,
+            required: false,
+            default: null
+        }
+    },
+
+    setup(props, { emit }) {
+        const onInput = (event) => emit('input', event.target.value);
+        const fieldId = computed(() => {
+            return props.label.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (m, chr) => chr.toUpperCase());
+        });
+
+        return { onInput, fieldId };
+    }
+};
+</script>
+
+<style scoped>
+.zw-field {
+    display: flex;
+    flex-direction: column;
+}
+
+.zw-field__input {
+    --border-color: rgb(var(--zw-color-n60));
+    --text-color: rgb(var(--zw-color-n85));
+
+    border: 1px solid var(--border-color);
+    background-color: transparent;
+    color: var(--text-color);
+    font-size: var(--zw-font-size-xxs);
+    outline: none;
+    padding: 6px;
+    line-height: var(--zw-line-height-xxs);
+    transition: 0.1s border ease-out, 0.1s color ease-out;
+    will-change: border, color;
+}
+
+.zw-field__input:hover {
+    --border-color: rgb(var(--zw-color-n80));
+    --text-color: rgb(var(--zw-color-n85));
+}
+
+.zw-field__input:focus,
+.zw-field__input:focus-within {
+    --border-color: rgb(var(--zw-color-white));
+    --text-color: rgb(var(--zw-color-white));
+}
+
+.zw-field__label {
+    display: inline-block;
+    font-size: var(--zw-font-size-xxs);
+    padding-bottom: var(--zw-offset-xxs);
+    line-height: var(--zw-line-height-xxs);
+}
+
+.zw-field__label--error {
+    font-size: var(--zw-font-size-xxs);
+    margin: var(--zw-offset-xxs) 0 0;
+    color: rgb(var(--zw-color-red));
+}
+</style>

package/lib/components/base/index.js

@@ -7,6 +7,7 @@ export { default as Range } from './Range';
 export { default as NumberField } from './NumberField';
 export { default as Modal } from './Modal';
 export { default as TextField } from './TextField';
+export { default as TextArea } from './TextArea';
 export { default as Checkbox } from './Checkbox';
 export { useModalToggler, useElementRef } from './composables';
 export * from './dropdown';

package/lib/components/floatingMenu/AiWidgetSuggestionItem.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="zw-ai-component__suggestion">
+        <p class="zw-ai-component-suggestion__request zw-margin-bottom--sm">
+            {{ suggestion.request }}
+        </p>
+        <p class="zw-margin-bottom--sm" v-html="suggestion.content" />
+
+        <Button v-if="suggestion.state !== 'loading'" @click="insert" class="zw-ai-component-suggestion__button">
+            Insert
+        </Button>
+    </div>
+</template>
+
+<script>
+import { inject } from 'vue';
+import { Button } from '../base';
+import { InjectionTokens } from '../../injectionTokens';
+
+export default {
+    name: 'AiWidgetSuggestionItem',
+
+    components: {
+        Button
+    },
+
+    props: {
+        suggestion: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup(props, { emit }) {
+        const editor = inject(InjectionTokens.EDITOR);
+
+        const insert = () => {
+            editor.chain().insertContent(props.suggestion.content).run();
+            emit('close');
+        };
+
+        return {
+            insert
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-ai-component__suggestion {
+    font-size: 14px;
+    margin-bottom: 8px;
+    padding: 16px 8px;
+    background-color: #FFF;
+    border: 0.5px solid #CDD1DC;
+    border-radius: 2px;
+}
+
+.zw-ai-component-suggestion__request {
+    font-size: 12px;
+    color: #666;
+}
+
+.zw-ai-component-suggestion__button {
+    font-size: 14px;
+    padding: 2px 4px;
+    background-color: #3AAA35;
+    color: #FFF;
+    border-radius: 2px;
+}
+
+.zw-ai-component-suggestion__button:hover {
+    opacity: 0.8;
+}
+</style>

package/lib/components/floatingMenu/FloatingMenuControl.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="zw-position--relative">
+        <FloatingMenu
+            :should-show="shouldShow"
+            v-if="editor"
+            :editor="editor"
+            ref="floatingMenu"
+
+            :tippy-options="menuOptions"
+        >
+            <Button icon class="zw-floating-menu__button" :active="isActive" @click="toggler.open" v-tooltip="'Write with AI'">
+                <Icon name="sparkles" size="24px" />
+            </Button>
+        </FloatingMenu>
+
+        <Modal class="zw-link-modal" :toggler="toggler" ref="modalRef" focus-first-control>
+            <form class="zw-link-modal__body" @submit.prevent="generateText">
+                <div class="zw-link-form__body">
+                    Selected text:
+                    <p class="zw-ai-component__selected-text">
+                        {{ selectedText }}
+                    </p>
+
+                    <template v-if="suggestions.length || isLoading">
+                        <p class="zw-margin-bottom--xs">
+                            Suggestions:
+                        </p>
+                        <AiWidgetSuggestionItem
+                            v-for="suggestion of suggestions"
+                            :suggestion="suggestion"
+                            :key="suggestion.result"
+                            @close="toggler.close"
+                        />
+
+                        <AiWidgetSuggestionItem v-if="isLoading" :suggestion="{ content: 'Working on it...', state: 'loading' }" />
+                    </template>
+
+                </div>
+
+                <div class="zw-position--relative">
+                    <input v-model="prompt" type="text" class="zw-ai-component__input" placeholder="Tell us to ...">
+
+                    <Button type="submit" class="zw-ai-component__send-button">
+                        <Icon auto-color class="zw-ai-component__icon" :name="iconName" size="32px" />
+                    </Button>
+                </div>
+            </form>
+        </Modal>
+    </div>
+</template>
+
+<script>
+import { inject, ref, unref, computed } from 'vue';
+import { FloatingMenu } from '@tiptap/vue-2';
+import { Button, Icon, Modal, useModalToggler } from '../base';
+import { InjectionTokens } from '../../injectionTokens';
+import { tooltip } from '../../directives';
+import AiWidgetSuggestionItem from './AiWidgetSuggestionItem';
+
+export default {
+    name: 'FloatingMenuControl',
+
+    components: {
+        AiWidgetSuggestionItem,
+        FloatingMenu,
+        Icon,
+        Button,
+        Modal
+    },
+
+    directives: {
+        tooltip
+    },
+
+    setup() {
+        const editor = inject(InjectionTokens.EDITOR);
+        const suggestions = ref([]);
+        const wrapperRef = ref(null);
+        const floatingMenu = ref(null);
+        const modalRef = ref(null);
+        const prompt = ref('');
+        const isLoading = ref(false);
+
+        const selectedText = computed(() => editor.commands.getSelectedText());
+
+        const iconName = computed(() => {
+            return unref(isLoading) ? 'loading' : 'send';
+        });
+
+        const onBeforeOpened = () => {
+            suggestions.value = [];
+        };
+
+        const toggler = useModalToggler({
+            onBeforeOpened: () => onBeforeOpened(),
+            wrapperRef: floatingMenu,
+            modalRef
+        });
+
+        const isActive = computed(() => unref(toggler.isOpened));
+
+        const shouldShow = () => {
+            return selectedText.value.length > 1;
+        };
+
+        const generateText = async () => {
+            if(isLoading.value) return;
+
+            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 });
+
+            isLoading.value = false;
+            suggestions.value.push(result);
+        };
+
+        const menuOptions = {
+            placement: 'right-end',
+            offset: [0, 10]
+        };
+
+        return {
+            selectedText,
+            editor,
+            floatingMenu,
+            shouldShow,
+            menuOptions,
+            toggler,
+            wrapperRef,
+            modalRef,
+            isActive,
+            generateText,
+            suggestions,
+            prompt,
+            iconName,
+            isLoading
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-floating-menu__button {
+    padding: 2px;
+    background-color: rgba(255, 252, 252, 1);
+    border-radius: 50%;
+    box-shadow: 0 0 0 0 1px #878DA2;
+}
+
+.zw-link-modal {
+    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 {
+    padding: var(--zw-offset-sm);
+}
+
+.zw-link-form__body {
+    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 {
+    font-size: 14px;
+    margin-bottom: 8px;
+    padding: 16px 8px;
+    background-color: #FFF;
+    border: 0.5px solid #000;
+    border-radius: 2px;
+}
+
+.zw-ai-component__input {
+    width: 100%;
+    min-height: 40px;
+    border: 1px solid #E9E9E9;
+    border-radius: 5px;
+    padding: 8px;
+    font-size: 14px;
+}
+
+.zw-ai-component__send-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    right: 16px;
+}
+
+.zw-ai-component__icon {
+    color: #CDD1DC;
+}
+
+.zw-ai-component__send-button:hover .zw-ai-component__icon {
+    color: #878DA2;
+    transition: color 0.1s ease-in-out;
+}
+</style>
+

package/lib/components/floatingMenu/index.js

@@ -0,0 +1 @@
+export { default as FloatingMenuControl } from './FloatingMenuControl';

package/lib/components/toolbar/Toolbar.vue

@@ -63,6 +63,7 @@ export default {
 
 <style scoped>
 .zw-toolbar {
+    border: 1px solid rgba(var(--zw-color-white), 0.2);
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));

package/lib/components/toolbar/controls/AlignmentControl.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { inject, computed, unref } from 'vue';
+import { inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Alignments } from '../../../enums';
 import { ButtonToggle, Button, Icon } from '../../base';
@@ -56,8 +56,7 @@ export default {
 
     setup(_, { emit }) {
         const editor = inject(InjectionTokens.EDITOR);
-        const alignment = editor.commands.getAlignment();
-        const currentValue = computed(() => unref(alignment));
+        const currentValue = editor.commands.getAlignment();
 
         function toggle(value) {
             editor.chain().focus().applyAlignment(value).run();