arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:setting main chatbot

Browse Source 
fix:chatbot ui
This commit is contained in:
@jamaludinarifrohman6661
2025-03-04 14:46:29 +07:00
parent 9ea7e96af1
commit 572b86299c
11 changed files with 606 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
resources/views/chatbot/index.blade.php
View File

@@ -30,58 +30,85 @@
@include('layouts.partials/page-title', ['title' => 'Chatbot', 'subtitle' => 'Chatbot'])
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<button id="count-retribusi" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
<span class="d-none d-sm-block">Perhitungan Retribusi</span>
</button>
</li>
<li class="nav-item">
<button id="document-validation" data-bs-toggle="tab" aria-expanded="true"
class="nav-link active">
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
<span class="d-none d-sm-block">Validasi Dokumen PBG</span>
</button>
</li>
<li class="nav-item">
<button id="data-information" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
<span class="d-none d-sm-block">Pengumpulan Data PBG</span>
</button>
</li>
</ul>
</div>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<button id="count-retribusi" data-bs-toggle="tab" aria-expanded="false" class="nav-link active">
<span class="d-block d-sm-none"><i class="bx bx-home"></i></span>
<span class="d-none d-sm-block fs-4">Perhitungan Retribusi</span>
</button>
</li>
<li class="nav-item">
<button id="document-validation" data-bs-toggle="tab" aria-expanded="true" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-user"></i></span>
<span class="d-none d-sm-block fs-4">Validasi Dokumen PBG</span>
</button>
</li>
<li class="nav-item">
<button id="data-information" data-bs-toggle="tab" aria-expanded="false" class="nav-link">
<span class="d-block d-sm-none"><i class="bx bx-envelope"></i></span>
<span class="d-none d-sm-block fs-4">Pengumpulan Data PBG</span>
</button>
</li>
</ul>
{{-- <div class="card-header">
</div> --}}
<div class="card-body d-flex flex-column" style="height: 700px;">
<!-- Conversation Area -->
<!-- Bot Response -->
{{-- <!-- Bot Response -->
<div class="row flex-grow overflow-auto">
<div class="col-9 w-auto">
<span class="d-flex align-items-center mb-1">
<img class="rounded-circle" width="32" src="/images/iconchatbot.jpeg" alt="avatar-3">
</span>
<div class="bot-response p-2 bg-light rounded mb-2">
<p>Halo! Ada yang bisa saya bantu?</p>
<div class="bot-response p-2 bg-light rounded mb-2 d-flex align-items-center">
<span class="d-flex align-items-center mb-1">
<img class="rounded-circle" width="45" src="/images/iconchatbot.jpeg" alt="avatar-3">
</span>
<div class="d-flex flex-column ms-2">
<div class="row">
<p class="fw-bolder mb-1">Neng Bedas</p>
<p class="mb-0">Halo! Ada yang bisa saya bantu?</p>
</div>
<div class="sending-message-time">
<p class="text-muted small mb-0 text-end">Now</p>
</div>
</div>
</div>
</div>
</div> --}}
<!-- Bot Response -->
<div class="row flex-grow overflow-auto align-items-start">
<!-- Avatar -->
<div class="col-auto alignpe-0">
<img class="rounded-circle" width="45" src="/images/iconchatbot.jpeg" alt="avatar-3">
</div>
<!-- Nama dan Bubble Chat -->
<div class="col-9 w-auto">
<!-- Nama Bot -->
<p class="fw-bolder mb-1">Neng Bedas</p>
<!-- Bubble Chat -->
<div class="bot-response p-2 bg-light rounded mb-2 d-inline-block">
<p class="mb-0">Halo! Ada yang bisa saya bantu?</p>
<!-- Waktu (Tetap di Dalam Bubble Chat) -->
<div class="sending-message-time text-end mt-1">
<p class="text-muted small mb-0">Now</p>
</div>
</div>
</div>
</div>
<!-- Input & Button (Selalu di Bawah) -->
<div class="row mt-auto">
<div class="col-xl-12 d-flex align-items-end gap-1">
<textarea class="form-control" id="user-message"></textarea>
<button id="send" class="btn btn-primary btn-lg rounded-pill">
<button id="send" class="btn btn-primary btn-lg h-100 d-flex align-items-center">
<i class='bx bx-send'></i>
</button>
</div>
{{-- <div class="col-xl-2 d-flex justify-content-end">
</div> --}}
</div>
</div>
</div>
</div>