<script setup> definePageMeta({ layout: false, name: "hadithaChatBot", }); useHead({ name: "hadithaChatBot", title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`, meta: [ { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" }, ], bodyAttrs: { class: import.meta.env.VITE_HADITH_SYSTEM, }, }); const state = reactive({ filters: [ { label: "خلاصه سازی", icon: "i-lucide-bookmark", children: [ { label: "خلاصهسازی حدیث", }, { label: "خلاصهسازی بابهای مختلف کتاب الکافی", }, { label: "خلاصهسازی احادیث درباره اخلاق و رفتار", }, { label: "خلاصهسازی احادیث با موضوع نماز و عبادات", }, { label: "خلاصهسازی احادیث از امام علی (ع)", }, ], }, { label: "دسته بندی", icon: "i-lucide-bookmark", children: [ { label: "خلاصهسازی حدیث", }, { label: "خلاصهسازی بابهای مختلف کتاب الکافی", }, { label: "خلاصهسازی احادیث درباره اخلاق و رفتار", }, { label: "خلاصهسازی احادیث با موضوع نماز و عبادات", }, { label: "خلاصهسازی احادیث از امام علی (ع)", }, ], }, { label: "کلمات کلیدی", icon: "i-lucide-bookmark", children: [ { label: "خلاصهسازی حدیث", }, { label: "خلاصهسازی بابهای مختلف کتاب الکافی", }, { label: "خلاصهسازی احادیث درباره اخلاق و رفتار", }, { label: "خلاصهسازی احادیث با موضوع نماز و عبادات", }, { label: "خلاصهسازی احادیث از امام علی (ع)", }, ], }, { label: "تشخیص موجودی", icon: "i-lucide-bookmark", children: [ { label: "خلاصهسازی حدیث", }, { label: "خلاصهسازی بابهای مختلف کتاب الکافی", }, { label: "خلاصهسازی احادیث درباره اخلاق و رفتار", }, { label: "خلاصهسازی احادیث با موضوع نماز و عبادات", }, { label: "خلاصهسازی احادیث از امام علی (ع)", }, ], }, ], list: new Array(3).fill(0), value: "", }); // components declaration const HadithaLayout = defineAsyncComponent(() => import("@haditha/layouts/HadithaLayout.vue") ); const NavigationMenu = defineAsyncComponent(() => import("@haditha/components/haditha/NavigationMenu.vue") ); </script> <template> <HadithaLayout> <div class="chat-bot-page h-full"> <div class="page-container pt-20 h-full"> <navigation-menu></navigation-menu> <UContainer ui="{ base: 'sm:px-6 lg:px-4', }" class="page-inner-container sm:px-6 lg:px-4 h-full" > <div class="page-content flex flex-col py-12 p-2 h-full"> <div v-if="state.list.length" class="messages basis-full"> <div class="r-message flex items-center mb-6"> <UIcon size="18" name="i-lucide-sparkle" class="star-icon align-self-start mt-1" ></UIcon> <p class="basis-full message"> من می تونم متن حدیث را خلاصه کنم. لطفا محتوای خود را بفرستید </p> <UButton class="p-0 copy-icon align-self-end" icon="i-lucide-clipboard-copy" variant="" > </UButton> </div> <div class="u-message flex justify-end mb-6"> <div class="u-message-container"> <p class="message"> عَنِ الْحَسَنِ بْنِ عَلِيِّ بْنِ يُوسُفَ، عَنْ جَدِّهِ، قَالَ: قَالَ أَبُو عَبْدِ اللَّهِ (عَلَيْهِ السَّلَامُ): إِنَّمَا يَدْرُسُ الْإِنسَانُ لِيَعْلَمَ، وَإِنَّمَا يَعْلَمُ لِيَعْمَلَ، وَإِنَّمَا يَعْمَلُ لِيُعْرَفَ بِهِ، وَإِنَّمَا يُعْرَفُ بِهِ لِيُقْبَلَ بِهِ، وَإِنَّمَا يُقْبَلُ بِهِ لِيُؤْمَنَ عَلَيْهِ، وَإِنَّمَا يُؤْمَنُ عَلَيْهِ لِيُدْخَلَ الْجَنَّةَ </p> <p>این حدیث را لطفا خلاصه کن</p> </div> </div> <div class="r-message flex items-center mb-6"> <UIcon size="18" name="i-lucide-sparkle" class="star-icon align-self-start mt-1" ></UIcon> <p class="basis-full message"> خلاصه این حدیث چنین است:امام صادق (علیهالسلام) میفرمایند: انسان دانش میآموزد تا به آن عمل کند، و با عملش شناخته شود. شناخت، سبب پذیرش او میشود، پذیرش باعث امانیافتن او میشود، و این امان یافتن، در نهایت او را به بهشت میرساند. </p> <UButton class="p-0 copy-icon align-self-end" icon="i-lucide-clipboard-copy" variant="" > </UButton> </div> </div> <div class="px-6 my-auto"> <div class="flex editor"> <UTextarea class="basis-full" size="xl" placeholder="به نظرم باید یکی دیگه بنویسی" variant="ghost" v-model="value" :rows="state.list.length ? 1 : 3" :maxrows="2" autoresize @update:modelValue="onUpdateValue" @change="onChangeValue" @blur="onBlur" /> <UButton class="p-0 send align-self-start" icon="i-lucide-arrow-up" variant="solid" > </UButton> </div> <div class="filters mt-3" v-if="state.list.length == 0"> <template v-for="(item, index) in state.filters"> <UDropdownMenu v-if="item.children?.length" :items="item.children" :ui="{ arrow: 'arrow', group: 'group', label: 'label', separator: 'separator', item: 'item', itemLeadingIcon: 'itemLeadingIcon', itemLeadingAvatar: 'itemLeadingAvatar', itemLeadingAvatarSize: 'itemLeadingAvatarSize', itemTrailing: 'itemTrailing', itemLabelExternalIcon: 'itemLabelExternalIcon', content: 'filters-content w-82', }" class="filter-dropdown me-2" > <UButton :label="item.label" icon="i-lucide-menu" color="neutral" variant="outline" /> </UDropdownMenu> <UButton v-else :icon="item.icon" :label="item.label" class="w-full flex justify-center items-center me-3" > </UButton> </template> </div> </div> </div> </UContainer> </div> </div> </HadithaLayout> </template> <style scoped> .chat-bot-page { background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%); .page-container { .page-inner-container { .r-message { .star-icon { color: #4d00ff; border: 1px solid; border-image-source: linear-gradient( 268.94deg, #d284ff -0.65%, #4d00ff 104.59% ); } .message { font-family: IRANSansX; font-weight: 400; font-size: 14px; line-height: 27px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); margin-inline-end: 1em; margin-inline-start: 0.5em; } .copy-icon { color: #545aea; width: 20; height: 20; } } .u-message { .u-message-container { width: 280; height: 240; max-width: 280px; background: linear-gradient( 169.5deg, #ffffff 25.51%, #e5e0ff 158.51% ); gap: 10px; border-radius: 12px; border-width: 0.3px; padding: 1em; border: 0.3px solid #d9d9d9; box-shadow: 0px 1px 4px 0px #0000000d; font-family: IRANSansX; font-weight: 400; font-size: 13px; line-height: 26px; letter-spacing: 0%; text-align: right; color: var(--ui-color-two); } } .editor { width: 672; height: 64; border-radius: 12px; border-width: 0.5px; padding-top: 12px; padding-right: 24px; padding-bottom: 12px; padding-left: 12px; background: linear-gradient(0deg, #ffffff 32.03%, #e5e0ff 135.16%); border: 0.5px solid; border-image-source: linear-gradient( 268.94deg, #d284ff -0.65%, #4d00ff 104.59% ); box-shadow: 0px 1px 4px 0px #0000000d; font-family: IRANSansX; font-weight: 300; font-size: 14px; line-height: 21px; letter-spacing: 0%; text-align: right; color: #8a92a8; .send { width: 3em; /*40px;*/ height: 2.8em; /*40px;*/ gap: 1px; border-radius: 24px; background: #1b2132; color: #fff; display: flex; justify-content: center; align-items: center; } } .filters { .filter-dropdown { width: 122.5999984741211; height: 32; gap: 4px; border-radius: 8px; border-width: 1px; border-style: solid; border-color: #4d00ff; /* border-image: linear-gradient(268.94deg, #d284ff, #4d00ff) 1; */ padding: 8px; box-shadow: 0px 1px 4px 0px #0000000d; font-family: IRANSansX; font-weight: 400; font-size: 11px; line-height: 16.5px; letter-spacing: 0%; text-align: center; color: var(--ui-color-two); } .filters-content { width: 328; height: 234; gap: 12px; border-radius: 12px; border-width: 0.3px; padding: 8px; background: #ffffff; border: 0.3px solid #4d00ff; border-image-source: linear-gradient( 268.94deg, #d284ff -0.65%, #4d00ff 104.59% ); box-shadow: 0px 1px 4px 0px #0000000d; } } } } } </style> <style> .chat-bot-page { .page-container { .page-inner-container { .editor { textarea { resize: none; background: transparent; color: #8a92a8; } } } } } .filters-content { width: 328; height: 234; gap: 12px; border-radius: 12px; border-width: 1px; padding: 8px; background: #ffffff; border: 0.3px solid #4d00ff; /* border-image-source: linear-gradient( 268.94deg, #d284ff -0.65%, #4d00ff 104.59% ); */ box-shadow: 0px 1px 4px 0px #0000000d; .item { margin-bottom: 0.5em; width: 312; height: 34; gap: 10px; border-radius: 8px; padding-top: 8px; padding-right: 12px; padding-bottom: 8px; padding-left: 12px; &:hover { background: linear-gradient(137.41deg, #ffffff -42.82%, #e5e0ff 87.9%); } } } </style>