@zipify/wysiwyg 3.5.0-ai-prototype → 3.5.0

package/lib/components/floatingMenu/FloatingMenuControl.vue

@@ -1,204 +0,0 @@
-<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

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

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

@@ -1,185 +0,0 @@
-<template>
-    <div class="zw-position--relative" ref="wrapperRef">
-        <Button icon skin="toolbar" :active="isActive" @click="toggler.open" v-tooltip="'Generate text'">
-            <Icon name="sparkles" size="28px" />
-        </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' }"
-                />
-
-                <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"
-                    />
-                    <Button type="submit" class="zw-ai-component__send-button">
-                        <Icon auto-color class="zw-ai-component__icon" name="send" size="32px" />
-                    </Button>
-                </div>
-
-                <Button :disabled="!lastSuggestions" type="button" skin="primary" @click="applyText">
-                    Apply
-                </Button>
-            </form>
-
-
-        </Modal>
-    </div>
-</template>
-
-<script>
-import { computed, ref, inject, unref } 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';
-
-export default {
-    name: 'AiControl',
-
-    components: {
-        Modal,
-        Icon,
-        Button,
-        TextArea,
-        AiControlHeader,
-        AiSuggestionItem
-    },
-
-    directives: {
-        tooltip
-    },
-
-    setup() {
-        const wrapperRef = ref(null);
-        const modalRef = ref(null);
-
-        const prompt = ref('');
-        const suggestions = ref([]);
-        const isLoading = ref(false);
-
-        const textAreaLabel = computed(() => {
-            return suggestions.value.length ? 'Tell AI what to do next…' : 'Write you request';
-        });
-
-        const lastSuggestions = computed(() => suggestions.value[suggestions.value.length - 1]);
-
-        const editor = inject(InjectionTokens.EDITOR);
-
-        const onBeforeOpened = () => {};
-
-        const toggler = useModalToggler({
-            onBeforeOpened: () => onBeforeOpened(),
-            wrapperRef,
-            modalRef
-        });
-
-        const onAction = async (action) => {
-            isLoading.value = true;
-
-            const lastSuggestions = suggestions.value[suggestions.value.length - 1];
-
-            const context = lastSuggestions ? lastSuggestions.content : '';
-
-            const result = await editor.commands.generateText({ prompt: action, context });
-
-            isLoading.value = false;
-            suggestions.value.push(result);
-        };
-
-        const generateText = async () => {
-            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 });
-
-            isLoading.value = false;
-            prompt.value = '';
-            suggestions.value.push(result);
-        };
-
-        const applyText = () => {
-            editor.commands.setContent(lastSuggestions.value.content);
-            toggler.close();
-            suggestions.value = [];
-            prompt.value = '';
-        };
-
-        const isActive = computed(() => unref(toggler.isOpened));
-
-        return {
-            wrapperRef,
-            modalRef,
-            toggler,
-            isActive,
-            prompt,
-            generateText,
-            lastSuggestions,
-            textAreaLabel,
-            isLoading,
-            onAction,
-            applyText
-        };
-    }
-};
-</script>
-
-<style scoped>
-.zw-suggestion-modal {
-    width: 500px;
-}
-
-.zw-link-modal__body {
-    padding: var(--zw-offset-sm);
-}
-
-.zw-generated-text__suggestion {
-    font-size: 14px;
-    color: #908E8E;
-}
-
-.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;
-}
-
-.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);
-}
-</style>

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

@@ -1,28 +0,0 @@
-<template>
-    <div class="zw-link-modal-header">
-        <span class="zw-link-modal-header__title">Generate text</span>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'AiControlHeader'
-};
-</script>
-
-<style scoped>
-.zw-link-modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--zw-offset-sm);
-    border-bottom: 2px solid rgb(var(--zw-color-n5));
-}
-
-.zw-link-modal-header__title {
-    text-transform: uppercase;
-    font-weight: var(--zw-font-weight-semibold);
-    font-size: var(--zw-font-size-xxs);
-    color: rgb(var(--zw-color-white));
-}
-</style>

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

@@ -1,74 +0,0 @@
-<template>
-    <div class="zw-ai-component__suggestion">
-        <p v-if="!isLoading" class="zw-ai-component-suggestion__request zw-margin-bottom--sm">
-            {{ suggestion.request }}
-        </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>
-    </div>
-</template>
-
-<script>
-import { inject, computed } from 'vue';
-import { Button } from '../../../base';
-import { InjectionTokens } from '../../../../injectionTokens';
-
-export default {
-    name: 'AiSuggestionItem',
-
-    components: {
-        Button
-    },
-
-    props: {
-        suggestion: {
-            type: Object,
-            required: true
-        }
-    },
-
-    setup(props, { emit }) {
-        const isLoading = computed(() => props.suggestion.state === 'loading');
-
-        const sendAction = (action) => {
-            emit('action', action);
-        };
-
-        return {
-            isLoading,
-            sendAction
-        };
-    }
-};
-</script>
-
-<style scoped>
-.zw-ai-component__suggestion {
-    font-size: 14px;
-    margin-bottom: 8px;
-    padding: 16px 8px;
-    color: #CDD1DC;
-    border-radius: 2px;
-}
-
-.zw-ai-component-suggestion__request {
-    font-size: 12px;
-    color: #666;
-}
-
-.zw-ai-component-suggestion__button {
-    font-size: 14px;
-    padding: 4px 8px;
-    background-color: #A4A4A4;
-    color: #FFF;
-    border-radius: 2px;
-}
-
-.zw-ai-component-suggestion__button:hover {
-    opacity: 0.8;
-    background-color: #3AAA35;
-}
-</style>

package/lib/extensions/AiComponent.js

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