diff --git a/admin/public/img/Crea.png b/admin/public/img/Crea.png new file mode 100644 index 000000000..e7c7a0a41 Binary files /dev/null and b/admin/public/img/Crea.png differ diff --git a/admin/public/img/Crea.webp b/admin/public/img/Crea.webp new file mode 100644 index 000000000..2b07ce14a Binary files /dev/null and b/admin/public/img/Crea.webp differ diff --git a/admin/src/components/AiChat.vue b/admin/src/components/AiChat.vue index cde70b16f..3e10b1dd6 100644 --- a/admin/src/components/AiChat.vue +++ b/admin/src/components/AiChat.vue @@ -1,34 +1,47 @@ @@ -56,15 +69,27 @@ const newMessage = ref('') const threadId = ref('') const messages = ref([]) const loading = ref(false) +const hasBeenOpened = ref(false) const buttonText = computed(() => t('send') + (loading.value ? '...' : '')) -const toggleButtonVariant = computed(() => (isChatOpen.value ? 'secondary' : 'primary')) +const textareaPlaceholder = computed(() => + loading.value ? t('ai.chat-placeholder-loading') : t('ai.chat-placeholder'), +) -const toggleChat = () => { - isChatOpen.value = !isChatOpen.value - if (isChatOpen.value && messages.value.length > 0) { +function openChat() { + isChatOpen.value = true + if (messages.value.length > 0) { scrollDown() } - if (!isChatOpen.value && threadId.value && threadId.value.length > 0) { +} + +function closeChat() { + hasBeenOpened.value = true + isChatOpen.value = false +} + +// clear +function clearChat() { + if (threadId.value && threadId.value.length > 0) { // delete thread on closing chat deleteResponse .mutate({ threadId: threadId.value }) @@ -73,6 +98,8 @@ const toggleChat = () => { messages.value = [] if (result.data.deleteThread) { toastSuccess(t('ai.chat-thread-deleted')) + newMessage.value = t('ai.start-prompt') + sendMessage() } }) .catch((error) => { @@ -123,8 +150,11 @@ onMounted(async () => { threadId.value = messagesFromServer[0].threadId messages.value = messagesFromServer scrollDown() + loading.value = false + } else { + newMessage.value = t('ai.start-prompt') + sendMessage() } - loading.value = false } }) @@ -145,6 +175,19 @@ onMounted(async () => { border: 1px solid darkblue; } +.chat-clear-button { + font-size: 12px; +} + +.bg-crea-img { + background-image: url('../../public/img/Crea.webp'); + background-size: cover; + background-position: center; + width: 250px; + height: 142px; + z-index: 100; +} + .chat-window { width: 550px; height: 300px; @@ -230,4 +273,18 @@ onMounted(async () => { transform: translateY(0); opacity: 1; } + +.slide-up-animation { + animation: slideUp 1s ease-out; + opacity: 1; +} + +@keyframes slideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json index 14c55f991..51e7c351b 100644 --- a/admin/src/locales/de.json +++ b/admin/src/locales/de.json @@ -4,9 +4,12 @@ "ai": { "chat": "Chat", "chat-open": "Chat öffnen", + "chat-clear": "Chat-Verlauf löschen", "chat-placeholder": "Schreibe eine Nachricht...", + "chat-placeholder-loading": "Warte, ich denke nach...", "chat-thread-deleted": "Chatverlauf gelöscht", - "error-chat-thread-deleted": "Fehler beim Löschen des Chatverlaufs: {error}" + "error-chat-thread-deleted": "Fehler beim Löschen des Chatverlaufs: {error}", + "start-prompt": "Sprache: Deutsch\nTonfall: Freundlich, per Du\nKontext: Du bist \"Crea\", ein Support-Assistent im Admin-Interface des Gradido-Kontos. Deine Aufgabe ist es, Moderatoren bei der Bearbeitung von Gemeinwohl-Beiträgen zu unterstützen.\nBegrüßung:\n\"Hallo, ich bin Crea! Ich unterstütze Dich bei der Beantwortung der eingereichten Gemeinwohl-Beiträge. Damit ich Deine Antworten personalisieren kann, nenne mir bitte Deinen Namen. 😊\"\nWarte nun die Eingabe des Namens ab!\nNach Eingabe des Namens:\n\"Danke, [Name]! Schön, mit Dir zusammenzuarbeiten. 😊 Kopiere nun bitte einen oder mehrere Gemeinwohl-Beiträge in das Textfeld, und ich helfe Dir bei der Bearbeitung.\"" }, "alias": "Alias", "all_emails": "Alle Nutzer", diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json index f89329580..070c2fc20 100644 --- a/admin/src/locales/en.json +++ b/admin/src/locales/en.json @@ -4,9 +4,12 @@ "ai": { "chat": "Chat", "chat-open": "Open chat", + "chat-clear": "Clear chat", "chat-placeholder": "Type your message here...", + "chat-placeholder-loading": "Wait, I think...", "chat-thread-deleted": "Chat thread has been deleted", - "error-chat-thread-deleted": "Error while deleting chat thread: {error}" + "error-chat-thread-deleted": "Error while deleting chat thread: {error}", + "start-prompt": "Language: English\nTone of voice: Friendly, on a first-name basis\nContext: You are \"Crea\", a support assistant in the admin interface of the Gradido account. Your task is to support moderators in editing contributions for the common good.\nGreeting:\n\"Hello, I'm Crea! I support you in answering the contributions for the common good. So that I can personalize your answers, please tell me your name. 😊\"\nNow wait for the name to be entered!\nAfter entering the name:\n\"Thank you, [name]! Nice to work with you. 😊 Now please copy one or more contributions for the common good into the text field and I'll help you edit them.\"" }, "alias": "Alias", "all_emails": "All users",