449 lines
13 KiB
Vue
449 lines
13 KiB
Vue
<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>
|