File size: 4,653 Bytes
51f2dc1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chatbot UI</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="js/index.js"></script>
</head>
<body class="bg-base-200 p-4 overflow-hidden">
<div class="relative h-[95vh] bg-base-100 rounded-2xl p-5 shadow-xl">
<!-- tab container-->
<div class="absolute -top-2 flex left-1/2 transform -translate-x-1/2 z-10">
<div class="tabs tabs-box glass">
<button id="chat-tab" class="tab tab-active flex items-center gap-2" onclick="switchTab('chat-tab')">
<svg width="16px" height="16px" viewBox="0 0 24 24" fill="none">
<g stroke-width="0"></g>
<g stroke-linecap="round" stroke-linejoin="round"></g>
<g>
<path d="M8 10.5H16" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
<path d="M8 14H13.5" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
<path
d="M17 3.33782C15.5291 2.48697 13.8214 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22C17.5228 22 22 17.5228 22 12C22 10.1786 21.513 8.47087 20.6622 7"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round"></path>
</g>
</svg>
Chat
</button>
<button id="explore-tab" class="tab flex items-center gap-2" onclick="switchTab('explore-tab')">
<svg fill="#ffffff" width="16px" height="16px" viewBox="0 -64 640 640" stroke="#ffffff">
<g stroke-width="0"></g>
<g stroke-linecap="round" stroke-linejoin="round"></g>
<g>
<path
d="M384 320H256c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32zM192 32c0-17.67-14.33-32-32-32H32C14.33 0 0 14.33 0 32v128c0 17.67 14.33 32 32 32h95.72l73.16 128.04C211.98 300.98 232.4 288 256 288h.28L192 175.51V128h224V64H192V32zM608 0H480c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32z">
</path>
</g>
</svg>
Explore
</button>
</div>
</div>
<!-- Chat UI Container -->
<div id="chat-tab-contents" class="relative w-full h-full">
<!-- <div class=" flex flex-col overflow-hidden"> -->
<div id="chat-messages-container" class="w-full h-full space-y-4 overflow-y-auto flex-1 pr-2 pb-20">
<!-- Message Bubble (Bot) -->
<div class="chat chat-start">
<div class="chat-bubble chat-bubble-secondary">Hello! Give me some data and I'll turn it into a nice KG graph for you</div>
</div>
</div>
<!-- Input Area -->
<div class="absolute bottom-0 left-0 right-0 p-4 rounded-xl shadow-xl bg-gray-700 text-base-content">
<div class="w-full">
<div class="flex gap-2 items-end">
<textarea id="chat-input"
class="w-full bg-base-800 text-base-content border max-h-[25vh] overflow-y-auto resize-y p-2 rounded-md"
placeholder="Type your message..." rows="1"></textarea>
<button id="chat-send-input" class="btn btn-sm btn-primary rounded-full">Send</button>
</div>
</div>
</div>
<!-- </div> -->
</div>
<div class="relative w-full h-full dot-grid overflow-hidden hidden" id="explore-tab-contents">
<div id="grapha" class="w-full h-full "></div>
</div>
</div>
</body>
</html> |