| 1 | <template> |
| 2 | <div> |
| 3 | <div class="ai-chatbot-button-wrapper fixed right-0 bottom-20 h-10 w-15" @click="showDrawer = true"> |
| 4 | <n-tooltip trigger="hover" placement="left"> |
| 5 | <template #trigger> |
| 6 | <n-float-button type="primary" class="ai-chatbot-button"> |
| 7 | <Icon name="carbon:chat-bot" /> |
| 8 | </n-float-button> |
| 9 | </template> |
| 10 | |
| 11 | AI Chatbot |
| 12 | </n-tooltip> |
| 13 | </div> |
| 14 | |
| 15 | <n-drawer |
| 16 | v-model:show="showDrawer" |
| 17 | :default-width="400" |
| 18 | class="max-w-[90vw] min-w-85" |
| 19 | display-directive="show" |
| 20 | :trap-focus="false" |
| 21 | resizable |
| 22 | > |
| 23 | <n-drawer-content closable body-content-class="p-0! overflow-hidden! flex flex-col"> |
| 24 | <template #header> |
| 25 | <div class="mr-4 flex items-center justify-between gap-4"> |
| 26 | <span>AI Chatbot</span> |
| 27 | <n-tooltip v-if="chatContainerCTX"> |
| 28 | <template #trigger> |
| 29 | <n-button text @click="chatContainerCTX.clearHistory()"> |
| 30 | <Icon name="mdi:broom" :size="18" /> |
| 31 | </n-button> |
| 32 | </template> |
| 33 | Clear chat history |
| 34 | </n-tooltip> |
| 35 | </div> |
| 36 | </template> |
| 37 | <ChatContainer class="grow" @mounted="chatContainerCTX = $event" /> |
| 38 | </n-drawer-content> |
| 39 | </n-drawer> |
| 40 | </div> |
| 41 | </template> |
| 42 | |
| 43 | <script setup lang="ts"> |
| 44 | import { NButton, NDrawer, NDrawerContent, NFloatButton, NTooltip } from "naive-ui" |
| 45 | import { ref } from "vue" |
| 46 | import Icon from "@/components/common/Icon.vue" |
| 47 | import ChatContainer from "./ChatContainer.vue" |
| 48 | |
| 49 | const showDrawer = ref(false) |
| 50 | const chatContainerCTX = ref<{ clearHistory: () => void } | null>(null) |
| 51 | </script> |
| 52 | |
| 53 | <style lang="scss" scoped> |
| 54 | .ai-chatbot-button-wrapper { |
| 55 | .ai-chatbot-button { |
| 56 | transition: all 0.25s var(--bezier-ease); |
| 57 | right: 20px; |
| 58 | |
| 59 | :deep() { |
| 60 | .n-float-button__body { |
| 61 | display: flex; |
| 62 | align-items: start; |
| 63 | padding-left: 11px; |
| 64 | } |
| 65 | } |
| 66 | } |
| 67 | &:not(:hover) { |
| 68 | .ai-chatbot-button { |
| 69 | width: 54px !important; |
| 70 | right: -20px; |
| 71 | } |
| 72 | } |
| 73 | } |
| 74 | </style> |