SuperAdmin
This commit is contained in:
Pranav
@@ -13,28 +13,30 @@ defineProps({
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="flex items-center px-8 py-4 bg-white border-b border-slate-100"
|
||||
class="sticky top-0 z-10 bg-n-background border-b border-n-weak"
|
||||
role="banner"
|
||||
>
|
||||
<a :href="responseSourcePath" class="text-woot-500 hover:underline mr-4">
|
||||
{{ 'Back' }}
|
||||
</a>
|
||||
<div
|
||||
class="border border-solid border-slate-100 text-slate-700 mr-4 p-2 rounded-full"
|
||||
>
|
||||
<svg width="24" height="24"><use xlink:href="#icon-mist-fill" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-col h-14 justify-center">
|
||||
<h1 id="page-title" class="text-base font-medium text-slate-900">
|
||||
{{ 'Robin AI playground' }}
|
||||
</h1>
|
||||
<p class="text-sm text-slate-600">
|
||||
{{ 'Chat with the source' }}
|
||||
<span class="font-medium">
|
||||
{{ responseSourceName }}
|
||||
</span>
|
||||
{{ 'and evaluate it’s efficiency.' }}
|
||||
</p>
|
||||
<div class="flex items-center h-16 mx-auto max-w-[60rem]">
|
||||
<a :href="responseSourcePath" class="text-woot-500 hover:underline mr-4">
|
||||
Back
|
||||
</a>
|
||||
<div
|
||||
class="border border-solid border-n-weak text-n-slate-11 mr-4 p-2 rounded-full"
|
||||
>
|
||||
<svg width="24" height="24"><use xlink:href="#icon-mist-fill" /></svg>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h1 id="page-title" class="text-lg font-medium text-n-slate-12">
|
||||
Robin AI playground
|
||||
</h1>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
Chat with the source
|
||||
<span class="font-medium text-n-slate-12">
|
||||
{{ responseSourceName }}
|
||||
</span>
|
||||
and evaluate it's efficiency.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -38,38 +38,77 @@ const { accountsCount, usersCount, inboxesCount, conversationsCount } =
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<header class="main-content__header" role="banner">
|
||||
<h1 id="page-title" class="main-content__page-title">
|
||||
{{ 'Admin Dashboard' }}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<section class="main-content__body main-content__body--flush">
|
||||
<div class="report--list">
|
||||
<div class="report-card">
|
||||
<div class="metric">{{ accountsCount }}</div>
|
||||
<div>{{ 'Accounts' }}</div>
|
||||
</div>
|
||||
<div class="report-card">
|
||||
<div class="metric">{{ usersCount }}</div>
|
||||
<div>{{ 'Users' }}</div>
|
||||
</div>
|
||||
<div class="report-card">
|
||||
<div class="metric">{{ inboxesCount }}</div>
|
||||
<div>{{ 'Inboxes' }}</div>
|
||||
</div>
|
||||
<div class="report-card">
|
||||
<div class="metric">{{ conversationsCount }}</div>
|
||||
<div>{{ 'Conversations' }}</div>
|
||||
<section class="flex flex-col w-full h-full">
|
||||
<header
|
||||
class="sticky top-0 z-10 bg-n-background border-b border-n-weak"
|
||||
role="banner"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between w-full h-20 mx-auto max-w-[60rem]"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="border border-n-weak p-2 rounded-full text-n-slate-11"
|
||||
>
|
||||
<svg width="24" height="24">
|
||||
<use xlink:href="#icon-dashboard-line" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<h1 id="page-title" class="text-base font-medium tracking-tight text-n-slate-12">
|
||||
Admin Dashboard
|
||||
</h1>
|
||||
<p class="text-xs text-n-slate-11 m-0">
|
||||
Accounts, users, and conversation metrics
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- eslint-disable vue/no-static-inline-styles -->
|
||||
<BarChart
|
||||
class="p-8 w-full"
|
||||
:collection="chartData"
|
||||
style="max-height: 500px"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="flex-1 px-6 overflow-y-auto">
|
||||
<div class="w-full mx-auto max-w-[60rem] py-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
|
||||
<div
|
||||
class="p-4 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
|
||||
>
|
||||
<div class="text-3xl font-semibold text-n-slate-12">
|
||||
{{ accountsCount }}
|
||||
</div>
|
||||
<div class="text-sm text-n-slate-11">Accounts</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
|
||||
>
|
||||
<div class="text-3xl font-semibold text-n-slate-12">
|
||||
{{ usersCount }}
|
||||
</div>
|
||||
<div class="text-sm text-n-slate-11">Users</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
|
||||
>
|
||||
<div class="text-3xl font-semibold text-n-slate-12">
|
||||
{{ inboxesCount }}
|
||||
</div>
|
||||
<div class="text-sm text-n-slate-11">Inboxes</div>
|
||||
</div>
|
||||
<div
|
||||
class="p-4 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
|
||||
>
|
||||
<div class="text-3xl font-semibold text-n-slate-12">
|
||||
{{ conversationsCount }}
|
||||
</div>
|
||||
<div class="text-sm text-n-slate-11">Conversations</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="p-6 rounded-xl bg-n-solid-2 outline outline-1 outline-n-container shadow-sm"
|
||||
>
|
||||
<BarChart class="w-full max-h-[500px]" :collection="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -99,37 +99,41 @@ export default {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col w-full h-full bg-slate-25">
|
||||
<section class="flex flex-col w-full h-full bg-n-background">
|
||||
<PlaygroundHeader
|
||||
:response-source-name="componentData.responseSourceName"
|
||||
:response-source-path="componentData.responseSourcePath"
|
||||
/>
|
||||
<div class="flex-1 px-8 py-4 overflow-auto">
|
||||
<div
|
||||
v-for="message in messages"
|
||||
:id="`message-${message.id}`"
|
||||
:key="message.id"
|
||||
>
|
||||
<UserMessage
|
||||
v-if="message.type === 'User'"
|
||||
:message="formatMessage(message.content)"
|
||||
/>
|
||||
<BotMessage v-else :message="formatMessage(message.content)" />
|
||||
<div class="flex-1 px-6 py-4 overflow-auto">
|
||||
<div class="w-full mx-auto max-w-[60rem]">
|
||||
<div
|
||||
v-for="message in messages"
|
||||
:id="`message-${message.id}`"
|
||||
:key="message.id"
|
||||
>
|
||||
<UserMessage
|
||||
v-if="message.type === 'User'"
|
||||
:message="formatMessage(message.content)"
|
||||
/>
|
||||
<BotMessage v-else :message="formatMessage(message.content)" />
|
||||
</div>
|
||||
<TypingIndicator v-if="isWaiting" />
|
||||
</div>
|
||||
<TypingIndicator v-if="isWaiting" />
|
||||
</div>
|
||||
<div class="w-full px-8 py-6">
|
||||
<textarea
|
||||
ref="messageInput"
|
||||
v-model="messageContent"
|
||||
:rows="4"
|
||||
class="resize-none block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border !outline-2 border-slate-100 focus:ring-woot-500 focus:border-woot-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-woot-500 dark:focus:border-woot-500"
|
||||
placeholder="Type a message... [CMD/CTRL + Enter to send]"
|
||||
autofocus
|
||||
autocomplete="off"
|
||||
@keydown.meta.enter="onMessageSend"
|
||||
@keydown.ctrl.enter="onMessageSend"
|
||||
/>
|
||||
<div class="sticky bottom-0 z-10 px-6 py-6 bg-n-background">
|
||||
<div class="w-full mx-auto max-w-[60rem]">
|
||||
<textarea
|
||||
ref="messageInput"
|
||||
v-model="messageContent"
|
||||
:rows="4"
|
||||
class="resize-none block p-3 w-full text-sm text-n-slate-12 bg-n-solid-2 rounded-xl border border-n-weak focus:ring-2 focus:ring-woot-500 focus:border-woot-500 outline-none"
|
||||
placeholder="Type a message... [CMD/CTRL + Enter to send]"
|
||||
autofocus
|
||||
autocomplete="off"
|
||||
@keydown.meta.enter="onMessageSend"
|
||||
@keydown.ctrl.enter="onMessageSend"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user