<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>