Initial commit: Add logistics and order_detail message types
Some checks failed
Lock Threads / action (push) Has been cancelled
Mark stale issues and pull requests / stale (push) Has been cancelled
Publish Chatwoot EE docker images / build (linux/amd64, ubuntu-latest) (push) Has been cancelled
Publish Chatwoot EE docker images / build (linux/arm64, ubuntu-22.04-arm) (push) Has been cancelled
Publish Chatwoot EE docker images / merge (push) Has been cancelled
Publish Chatwoot CE docker images / build (linux/amd64, ubuntu-latest) (push) Has been cancelled
Publish Chatwoot CE docker images / build (linux/arm64, ubuntu-22.04-arm) (push) Has been cancelled
Publish Chatwoot CE docker images / merge (push) Has been cancelled
Run Chatwoot CE spec / lint-backend (push) Has been cancelled
Run Chatwoot CE spec / lint-frontend (push) Has been cancelled
Run Chatwoot CE spec / frontend-tests (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (0, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (1, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (10, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (11, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (12, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (13, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (14, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (15, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (2, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (3, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (4, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (5, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (6, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (7, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (8, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (9, 16) (push) Has been cancelled
Run Linux nightly installer / nightly (push) Has been cancelled
Some checks failed
Lock Threads / action (push) Has been cancelled
Mark stale issues and pull requests / stale (push) Has been cancelled
Publish Chatwoot EE docker images / build (linux/amd64, ubuntu-latest) (push) Has been cancelled
Publish Chatwoot EE docker images / build (linux/arm64, ubuntu-22.04-arm) (push) Has been cancelled
Publish Chatwoot EE docker images / merge (push) Has been cancelled
Publish Chatwoot CE docker images / build (linux/amd64, ubuntu-latest) (push) Has been cancelled
Publish Chatwoot CE docker images / build (linux/arm64, ubuntu-22.04-arm) (push) Has been cancelled
Publish Chatwoot CE docker images / merge (push) Has been cancelled
Run Chatwoot CE spec / lint-backend (push) Has been cancelled
Run Chatwoot CE spec / lint-frontend (push) Has been cancelled
Run Chatwoot CE spec / frontend-tests (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (0, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (1, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (10, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (11, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (12, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (13, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (14, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (15, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (2, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (3, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (4, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (5, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (6, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (7, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (8, 16) (push) Has been cancelled
Run Chatwoot CE spec / backend-tests (9, 16) (push) Has been cancelled
Run Linux nightly installer / nightly (push) Has been cancelled
- Add Logistics component with progress tracking - Add OrderDetail component for order information - Support data-driven steps and actions - Add blue color scale to widget SCSS - Fix node overflow and progress bar rendering issues - Add English translations for dashboard components Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Liang XJ
@@ -0,0 +1,34 @@
|
||||
<script setup>
|
||||
import Guardrails from './Guardrails.vue';
|
||||
import Scenarios from './Scenarios.vue';
|
||||
import ResponseGuidelines from './ResponseGuidelines.vue';
|
||||
import Settings from './Settings.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/AnimatingImg/AnimatingImg"
|
||||
:layout="{ type: 'grid', width: '300px' }"
|
||||
>
|
||||
<Variant title="Guardrails">
|
||||
<div class="p-4 bg-n-background w-full h-full">
|
||||
<Guardrails class="size-60" />
|
||||
</div>
|
||||
</Variant>
|
||||
<Variant title="Scenarios">
|
||||
<div class="p-4 bg-n-background w-full h-full">
|
||||
<Scenarios class="size-60" />
|
||||
</div>
|
||||
</Variant>
|
||||
<Variant title="ResponseGuidelines">
|
||||
<div class="p-4 bg-n-background w-full h-full">
|
||||
<ResponseGuidelines class="size-60" />
|
||||
</div>
|
||||
</Variant>
|
||||
<Variant title="Settings">
|
||||
<div class="p-4 bg-n-background w-full h-full">
|
||||
<Settings class="size-60" />
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,990 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const paused = ref(false);
|
||||
|
||||
const toggle = () => {
|
||||
paused.value = !paused.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="svg-wrapper relative"
|
||||
:class="{ paused }"
|
||||
role="button"
|
||||
:aria-pressed="paused"
|
||||
tabindex="0"
|
||||
@click="toggle"
|
||||
>
|
||||
<div class="absolute z-0 flex-shrink-0">
|
||||
<svg
|
||||
width="auto"
|
||||
height="auto"
|
||||
viewBox="0 0 200 156"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity="0.5">
|
||||
<g clip-path="url(#clip0_773_34322)">
|
||||
<circle cx="8" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<rect
|
||||
width="200"
|
||||
height="156"
|
||||
fill="url(#paint0_linear_773_34322)"
|
||||
/>
|
||||
<rect
|
||||
width="200"
|
||||
height="156"
|
||||
fill="url(#paint1_linear_773_34322)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_773_34322"
|
||||
x1="100"
|
||||
y1="0"
|
||||
x2="100"
|
||||
y2="156"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="var(--gradient-start)" />
|
||||
<stop
|
||||
offset="0.480769"
|
||||
stop-color="var(--gradient-start)"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop offset="1" stop-color="var(--gradient-start)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_773_34322"
|
||||
x1="0"
|
||||
y1="78"
|
||||
x2="200"
|
||||
y2="78"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="var(--gradient-start)" />
|
||||
<stop
|
||||
offset="0.480769"
|
||||
stop-color="var(--gradient-start)"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop offset="1" stop-color="var(--gradient-start)" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_773_34322">
|
||||
<rect width="200" height="156" rx="16" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 136 108"
|
||||
aria-hidden="false"
|
||||
focusable="false"
|
||||
class="z-10 relative flex-shrink-0"
|
||||
>
|
||||
<rect width="136" height="108" fill="url(#paint0_radial_720_25701)" />
|
||||
<path
|
||||
d="M49 35.039C49 33.9129 49.9129 33 51.039 33C52.1651 33 53.0779 33.9129 53.0779 35.039V39.7513C53.0779 40.8774 52.1651 41.7902 51.039 41.7902C49.9129 41.7902 49 40.8774 49 39.7513V35.039Z"
|
||||
class="fill-n-slate-10"
|
||||
/>
|
||||
<path
|
||||
d="M55.5244 35.039C55.5244 33.9129 56.4373 33 57.5634 33C58.6895 33 59.6024 33.9129 59.6024 35.039V39.7513C59.6024 40.8774 58.6895 41.7902 57.5634 41.7902C56.4373 41.7902 55.5244 40.8774 55.5244 39.7513V35.039Z"
|
||||
class="fill-n-slate-10"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M58.1862 24.173C50.5933 23.1017 44.4039 23.0594 36.6405 24.1683C34.678 24.4485 33.3796 24.638 32.3896 24.9273C31.4716 25.1956 30.9496 25.5155 30.5177 25.9981C29.6236 26.9974 29.5057 28.1276 29.3838 32.0695C29.264 35.9436 29.5013 39.4156 29.9507 43.3222C30.1901 45.4039 30.3549 46.8088 30.618 47.8769C30.8676 48.89 31.1694 49.4347 31.5889 49.8518C32.0117 50.2721 32.5536 50.5686 33.5482 50.8091C34.6002 51.0636 35.9806 51.2175 38.032 51.4413C44.6668 52.1652 49.6333 52.1615 56.2927 51.4451C58.369 51.2218 59.7719 51.0678 60.8396 50.815C61.8541 50.5749 62.3995 50.2805 62.8165 49.8722C63.2247 49.4724 63.5366 48.921 63.8071 47.8574C64.0894 46.7477 64.2815 45.2793 64.5594 43.1222C65.0553 39.2735 65.4123 35.8935 65.4262 32.1908C65.4411 28.232 65.3601 27.1056 64.4558 26.0608C64.019 25.5562 63.488 25.2244 62.5491 24.9481C61.5352 24.6497 60.2017 24.4573 58.1862 24.173ZM36.1664 20.849C44.2537 19.6939 50.7606 19.7391 58.6546 20.8529L58.7701 20.8692C60.6392 21.1328 62.2183 21.3555 63.4958 21.7315C64.8745 22.1372 66.0274 22.7532 66.991 23.8665C68.8087 25.9666 68.7969 28.4583 68.7811 31.7688C68.7804 31.9121 68.7797 32.057 68.7792 32.2034C68.7645 36.1184 68.3857 39.6634 67.8849 43.5506L67.8717 43.6535C67.6103 45.682 67.395 47.3537 67.0566 48.6839C66.7008 50.0827 66.169 51.282 65.1624 52.2678C64.1645 53.245 62.9854 53.7528 61.6119 54.0778C60.3149 54.3848 58.7011 54.5584 56.7558 54.7676L56.6513 54.7789C49.7551 55.5207 44.5465 55.5249 37.6684 54.7745L37.5622 54.7629C35.6442 54.5537 34.0471 54.3795 32.7599 54.0681C31.3915 53.7371 30.2202 53.219 29.2249 52.2296C28.2263 51.2369 27.7018 50.0571 27.3623 48.6788C27.0421 47.3788 26.856 45.7601 26.6318 43.8109L26.6197 43.7053C26.1588 39.6989 25.906 36.0546 26.0325 31.9659C26.037 31.8176 26.0414 31.6709 26.0458 31.5257C26.144 28.24 26.2178 25.7754 28.019 23.7623C28.9747 22.6942 30.1043 22.102 31.449 21.7089C32.6962 21.3444 34.2339 21.1249 36.0541 20.865C36.0914 20.8597 36.1288 20.8543 36.1664 20.849Z"
|
||||
class="fill-n-slate-10"
|
||||
/>
|
||||
<path
|
||||
d="M103.999 77.4062H108.999C110.104 77.4062 110.999 78.3017 110.999 79.4062C110.999 80.5108 110.104 81.4062 108.999 81.4062H103.999V77.4062Z"
|
||||
class="fill-n-slate-9"
|
||||
/>
|
||||
<path
|
||||
d="M63 77.4062H58C56.8954 77.4062 56 78.3017 56 79.4062C56 80.5108 56.8954 81.4062 58 81.4062H63V77.4062Z"
|
||||
class="fill-n-slate-9"
|
||||
/>
|
||||
<path
|
||||
d="M83.999 64.4063C85.4527 63.7978 86.4227 63.4566 87.9986 63.4508C89.5744 63.445 91.136 63.7496 92.5941 64.3472C94.0523 64.9449 95.3784 65.8239 96.4968 66.9341C97.6153 68.0442 98.5041 69.3638 99.1125 70.8175C99.721 72.2711 100.037 73.8304 100.043 75.4062"
|
||||
class="stroke-n-blue-11 fill-n-slate-2"
|
||||
stroke-width="1.6"
|
||||
/>
|
||||
<path
|
||||
d="M67.049 75.0889C67.0432 73.5131 67.3478 71.9515 67.9454 70.4934C68.5431 69.0352 69.4221 67.7091 70.5322 66.5907C71.6424 65.4723 72.962 64.5834 74.4157 63.975C75.8693 63.3666 77.4286 63.0504 79.0044 63.0445C80.5803 63.0387 82.1419 63.3433 83.6 63.941C85.0581 64.5386 86.3843 65.4176 87.5027 66.5278C88.6211 67.638 89.5099 68.9576 90.1184 70.4112C90.7268 71.8649 91.043 73.4241 91.0488 75"
|
||||
class="stroke-n-blue-11 fill-n-slate-2"
|
||||
stroke-width="1.6"
|
||||
/>
|
||||
<path
|
||||
d="M71.4659 74.9421C71.462 73.8915 71.6651 72.8505 72.0635 71.8784C72.462 70.9063 73.048 70.0222 73.7881 69.2766C74.5282 68.531 75.4079 67.9384 76.377 67.5328C77.3462 67.1272 78.3857 66.9164 79.4362 66.9125C80.4868 66.9086 81.5278 67.1117 82.4999 67.5101C83.472 67.9086 84.3561 68.4946 85.1017 69.2347C85.8473 69.9748 86.4399 70.8545 86.8455 71.8236C87.2511 72.7927 87.4619 73.8322 87.4658 74.8828"
|
||||
class="stroke-n-blue-11 fill-n-slate-2"
|
||||
stroke-width="1.6"
|
||||
/>
|
||||
<path
|
||||
d="M88.4304 67.3188C89.4809 67.3149 90.522 67.5179 91.4941 67.9164C92.4662 68.3148 93.3503 68.9008 94.0959 69.6409C94.8415 70.381 95.434 71.2608 95.8397 72.2299C96.2453 73.199 96.4561 74.2385 96.46 75.2891"
|
||||
class="stroke-n-blue-11 fill-n-slate-2"
|
||||
stroke-width="1.6"
|
||||
/>
|
||||
<path
|
||||
d="M75.9473 74.9203C75.9454 74.395 76.0469 73.8745 76.2461 73.3884C76.4453 72.9024 76.7383 72.4603 77.1084 72.0875C77.4785 71.7147 77.9183 71.4184 78.4029 71.2156C78.8874 71.0128 79.4072 70.9074 79.9325 70.9055C80.4578 70.9035 80.9783 71.0051 81.4643 71.2043C81.9504 71.4035 82.3924 71.6965 82.7652 72.0666C83.138 72.4366 83.4343 72.8765 83.6371 73.361C83.8399 73.8456 83.9453 74.3653 83.9473 74.8906"
|
||||
class="stroke-n-blue-11 fill-n-slate-2"
|
||||
stroke-width="1.6"
|
||||
/>
|
||||
<path
|
||||
d="M90.4585 71.6066C90.9445 71.8058 91.3866 72.0988 91.7594 72.4689C92.1322 72.839 92.4284 73.2788 92.6313 73.7634C92.8341 74.2479 92.9395 74.7677 92.9414 75.293"
|
||||
class="stroke-n-blue-11"
|
||||
stroke-width="1.6"
|
||||
/>
|
||||
<path
|
||||
d="M102 74.9062C103.09 74.9062 104.032 75.7999 103.973 76.957C103.853 79.29 103.335 81.588 102.439 83.751C101.939 84.9592 101.499 85.8713 100.931 86.7236C100.363 87.5763 99.6906 88.3338 98.7646 89.2598C96.6889 91.3355 93.3531 92.0527 91.0576 92.0527H76.5576C73.9588 92.0527 70.4405 91.3497 68.3506 89.2598C67.4349 88.3441 66.737 87.5905 66.1416 86.7441C65.5415 85.8911 65.0682 84.9765 64.5605 83.751C63.6646 81.588 63.1471 79.29 63.0273 76.957C62.968 75.7999 63.9098 74.9062 65 74.9062H102Z"
|
||||
class="fill-n-slate-2 stroke-n-slate-9"
|
||||
stroke-width="2"
|
||||
/>
|
||||
|
||||
<g class="default-group">
|
||||
<path
|
||||
d="M103.85 21.1431C104.824 20.8821 105.847 21.3479 106.291 22.2542L112.209 34.3514C112.793 35.544 112.143 36.9734 110.861 37.3171L100.014 40.2235C98.7313 40.5669 97.4538 39.654 97.3628 38.3295L96.4399 24.8937C96.3708 23.8871 97.0247 22.9718 97.9993 22.7107L103.85 21.1431Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M104.528 18.8482C104.84 18.7645 105.124 18.5966 105.347 18.363C106.576 17.0748 105.336 14.9834 103.616 15.4439L95.3492 17.659C93.6293 18.1203 93.6011 20.5515 95.3101 21.0523C95.6201 21.1431 95.9494 21.1468 96.2614 21.0633L104.528 18.8482Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<rect
|
||||
x="95.3496"
|
||||
y="21.2852"
|
||||
width="10.4348"
|
||||
height="2.08696"
|
||||
rx="0.695652"
|
||||
transform="rotate(-15 95.3496 21.2852)"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M103.249 14.4618C103.363 14.5616 103.464 14.6686 103.55 14.7819C103.782 15.0879 103.556 15.4819 103.185 15.5813L99.4893 16.5716L95.7936 17.5618C95.4224 17.6613 95.0296 17.4332 95.0777 17.052C95.0955 16.9109 95.1292 16.7679 95.1785 16.6242C95.3106 16.2393 95.5529 15.8568 95.8916 15.4986C96.2303 15.1403 96.6587 14.8133 97.1525 14.5362C97.6462 14.2592 98.1955 14.0375 98.7691 13.8838C99.3426 13.7301 99.9292 13.6474 100.495 13.6405C101.061 13.6336 101.596 13.7026 102.068 13.8435C102.541 13.9844 102.942 14.1945 103.249 14.4618Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g class="frame frame-1">
|
||||
<path
|
||||
d="M97.8899 24.7525C97.1819 24.0337 97.0822 22.9139 97.6517 22.0811L105.253 10.9636C106.002 9.8676 107.566 9.72734 108.498 10.6731L116.378 18.6731C117.31 19.619 117.146 21.1806 116.039 21.9133L104.809 29.3463C103.967 29.9032 102.848 29.7861 102.14 29.0673L97.8899 24.7525Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M95.5608 25.2908C95.3341 25.0607 95.0482 24.8971 94.735 24.8184C93.0078 24.3847 91.8006 26.4952 93.05 27.7641L99.0562 33.8613C100.306 35.1296 102.435 33.9543 102.027 32.2207C101.953 31.9063 101.794 31.6181 101.567 31.3879L95.5608 25.2908Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<rect
|
||||
x="102.207"
|
||||
y="32.0742"
|
||||
width="10.4348"
|
||||
height="2.08696"
|
||||
rx="0.695652"
|
||||
transform="rotate(-134.569 102.207 32.0742)"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M92.3768 28.5691C92.4071 28.4202 92.4505 28.2799 92.5066 28.1492C92.6581 27.7962 93.1124 27.7985 93.3821 28.0722L96.0671 30.7979L98.7521 33.5236C99.0218 33.7973 99.0172 34.2515 98.6619 34.3978C98.5304 34.4519 98.3895 34.4932 98.2402 34.5212C97.8402 34.5963 97.3879 34.5743 96.9092 34.4565C96.4304 34.3387 95.9346 34.1274 95.45 33.8347C94.9654 33.542 94.5015 33.1737 94.0848 32.7506C93.668 32.3276 93.3067 31.8582 93.0213 31.3692C92.7359 30.8803 92.5321 30.3813 92.4216 29.9009C92.311 29.4204 92.2958 28.9679 92.3768 28.5691Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<circle cx="85" cy="40" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="91" cy="38" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="91" cy="44" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="85" cy="46" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="79" cy="46" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="88" cy="51" r="1" class="fill-n-slate-11" />
|
||||
</g>
|
||||
|
||||
<g class="frame frame-2">
|
||||
<path
|
||||
d="M97.8879 24.7721C97.1799 24.0532 97.0803 22.9335 97.6497 22.1006L105.251 10.9832C106 9.88713 107.564 9.74688 108.496 10.6927L116.376 18.6926C117.308 19.6385 117.144 21.2001 116.037 21.9329L104.807 29.3658C103.965 29.9227 102.846 29.8056 102.138 29.0868L97.8879 24.7721Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M95.5579 25.3103C95.3311 25.0803 95.0453 24.9167 94.7321 24.838C93.0048 24.4042 91.7977 26.5148 93.0471 27.7836L99.0532 33.8808C100.303 35.1491 102.432 33.9738 102.024 32.2403C101.95 31.9259 101.791 31.6376 101.564 31.4075L95.5579 25.3103Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<rect
|
||||
x="102.205"
|
||||
y="32.0938"
|
||||
width="10.4348"
|
||||
height="2.08696"
|
||||
rx="0.695652"
|
||||
transform="rotate(-134.569 102.205 32.0938)"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M92.3758 28.5886C92.4061 28.4397 92.4495 28.2994 92.5056 28.1687C92.6572 27.8157 93.1115 27.818 93.3811 28.0917L96.0661 30.8174L98.7512 33.5431C99.0208 33.8168 99.0162 34.2711 98.661 34.4173C98.5294 34.4714 98.3885 34.5128 98.2392 34.5408C97.8392 34.6158 97.3869 34.5938 96.9082 34.476C96.4295 34.3582 95.9336 34.1469 95.449 33.8542C94.9644 33.5616 94.5005 33.1932 94.0838 32.7702C93.6671 32.3471 93.3057 31.8777 93.0203 31.3888C92.735 30.8998 92.5312 30.4009 92.4206 29.9204C92.31 29.44 92.2948 28.9874 92.3758 28.5886Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<circle cx="84" cy="42" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="90" cy="40" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="90" cy="46" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="84" cy="48" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="78" cy="48" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="87" cy="53" r="1" class="fill-n-slate-11" />
|
||||
</g>
|
||||
|
||||
<g class="frame frame-3">
|
||||
<path
|
||||
d="M97.8879 24.7486C97.1799 24.0298 97.0803 22.91 97.6497 22.0771L105.251 10.9597C106 9.86369 107.564 9.72344 108.496 10.6692L116.376 18.6692C117.308 19.6151 117.144 21.1767 116.037 21.9094L104.807 29.3424C103.965 29.8993 102.846 29.7822 102.138 29.0634L97.8879 24.7486Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M95.5579 25.2908C95.3311 25.0607 95.0453 24.8971 94.7321 24.8184C93.0048 24.3847 91.7977 26.4952 93.0471 27.7641L99.0532 33.8613C100.303 35.1296 102.432 33.9543 102.024 32.2207C101.95 31.9063 101.791 31.6181 101.564 31.3879L95.5579 25.2908Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<rect
|
||||
x="102.205"
|
||||
y="32.0703"
|
||||
width="10.4348"
|
||||
height="2.08696"
|
||||
rx="0.695652"
|
||||
transform="rotate(-134.569 102.205 32.0703)"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<path
|
||||
d="M92.3758 28.5691C92.4061 28.4202 92.4495 28.2799 92.5056 28.1492C92.6572 27.7962 93.1115 27.7985 93.3811 28.0722L96.0661 30.7979L98.7512 33.5236C99.0208 33.7973 99.0162 34.2515 98.661 34.3978C98.5294 34.4519 98.3885 34.4932 98.2392 34.5212C97.8392 34.5963 97.3869 34.5743 96.9082 34.4565C96.4295 34.3387 95.9336 34.1274 95.449 33.8347C94.9644 33.542 94.5005 33.1737 94.0838 32.7506C93.6671 32.3276 93.3057 31.8582 93.0203 31.3692C92.735 30.8803 92.5312 30.3813 92.4206 29.9009C92.31 29.4204 92.2948 28.9679 92.3758 28.5691Z"
|
||||
class="stroke-n-slate-11 fill-n-slate-2"
|
||||
stroke-width="1.43699"
|
||||
/>
|
||||
<circle cx="82" cy="44" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="88" cy="42" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="88" cy="48" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="82" cy="50" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="76" cy="50" r="1" class="fill-n-slate-11" />
|
||||
<circle cx="85" cy="55" r="1" class="fill-n-slate-11" />
|
||||
</g>
|
||||
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_720_25701"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(68 54) rotate(90) scale(54 68)"
|
||||
>
|
||||
<stop
|
||||
offset="0.527769"
|
||||
stop-color="var(--gradient-end)"
|
||||
stop-opacity="0.9"
|
||||
/>
|
||||
<stop offset="1" stop-color="var(--gradient-end)" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
--gradient-start: #fcfcfd;
|
||||
--gradient-end: #fcfcfd;
|
||||
}
|
||||
|
||||
body.dark svg,
|
||||
.htw-dark svg {
|
||||
--gradient-start: #121213;
|
||||
--gradient-end: #121213;
|
||||
}
|
||||
|
||||
.svg-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.default-group {
|
||||
opacity: 0;
|
||||
transition: opacity 120ms linear;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.frame {
|
||||
opacity: 0;
|
||||
animation-name: frameVisible;
|
||||
animation-duration: 600ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: steps(1, end);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.frame-1 {
|
||||
animation-delay: 0ms;
|
||||
}
|
||||
.frame-2 {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
.frame-3 {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
|
||||
@keyframes frameVisible {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
33.333% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-wrapper.paused .frame {
|
||||
animation-play-state: paused;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.svg-wrapper.paused .default-group {
|
||||
opacity: 1;
|
||||
}
|
||||
.svg-wrapper:not(.paused) .default-group {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,752 @@
|
||||
<template>
|
||||
<div class="svg-wrapper relative" tabindex="0">
|
||||
<div class="absolute z-0 flex-shrink-0">
|
||||
<svg
|
||||
width="auto"
|
||||
height="auto"
|
||||
viewBox="0 0 200 156"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g opacity="0.5">
|
||||
<g clip-path="url(#clip0_773_34322)">
|
||||
<circle cx="8" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="3" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="9" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="15" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="21" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="27" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="33" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="39" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="45" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="51" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="57" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="63" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="69" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="75" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="81" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="87" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="93" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="99" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="105" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="111" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="117" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="123" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="129" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="135" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="141" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="147" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="8" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="16" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="24" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="32" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="40" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="48" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="56" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="64" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="72" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="80" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="88" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="96" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="104" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="112" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="120" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="128" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="136" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="144" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="152" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="160" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="168" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="176" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="184" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<circle cx="192" cy="153" r="1" class="fill-n-blue-9" />
|
||||
<rect
|
||||
width="200"
|
||||
height="156"
|
||||
fill="url(#paint0_linear_773_34322)"
|
||||
/>
|
||||
<rect
|
||||
width="200"
|
||||
height="156"
|
||||
fill="url(#paint1_linear_773_34322)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_773_34322"
|
||||
x1="100"
|
||||
y1="0"
|
||||
x2="100"
|
||||
y2="156"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="var(--gradient-start)" />
|
||||
<stop
|
||||
offset="0.480769"
|
||||
stop-color="var(--gradient-start)"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop offset="1" stop-color="var(--gradient-start)" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_773_34322"
|
||||
x1="0"
|
||||
y1="78"
|
||||
x2="200"
|
||||
y2="78"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="var(--gradient-start)" />
|
||||
<stop
|
||||
offset="0.480769"
|
||||
stop-color="var(--gradient-start)"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop offset="1" stop-color="var(--gradient-start)" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_773_34322">
|
||||
<rect width="200" height="156" rx="16" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 136 108"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden="false"
|
||||
focusable="false"
|
||||
class="z-10 relative flex-shrink-0"
|
||||
>
|
||||
<rect width="136" height="108" fill="url(#paint0_radial_797_91519)" />
|
||||
<path
|
||||
d="M58 48.039C58 46.9129 58.9129 46 60.039 46C61.1651 46 62.0779 46.9129 62.0779 48.039V52.7513C62.0779 53.8774 61.1651 54.7902 60.039 54.7902C58.9129 54.7902 58 53.8774 58 52.7513V48.039Z"
|
||||
class="fill-n-slate-10"
|
||||
/>
|
||||
<path
|
||||
d="M64.5244 48.039C64.5244 46.9129 65.4373 46 66.5634 46C67.6895 46 68.6024 46.9129 68.6024 48.039V52.7513C68.6024 53.8774 67.6895 54.7902 66.5634 54.7902C65.4373 54.7902 64.5244 53.8774 64.5244 52.7513V48.039Z"
|
||||
class="fill-n-slate-10"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M79.1862 40.173C71.5933 39.1017 65.4039 39.0594 57.6405 40.1683C55.678 40.4485 54.3796 40.638 53.3896 40.9273C52.4716 41.1956 51.9496 41.5155 51.5177 41.9981C50.6236 42.9974 50.5057 44.1276 50.3838 48.0695C50.264 51.9436 50.5013 55.4156 50.9507 59.3222C51.1901 61.4039 51.3549 62.8088 51.618 63.8769C51.8676 64.89 52.1694 65.4347 52.5889 65.8518C53.0117 66.2721 53.5536 66.5686 54.5482 66.8091C55.6002 67.0636 56.9806 67.2175 59.032 67.4413C65.6668 68.1652 70.6333 68.1615 77.2927 67.4451C79.369 67.2218 80.7719 67.0678 81.8396 66.815C82.8541 66.5749 83.3995 66.2805 83.8165 65.8722C84.2247 65.4724 84.5366 64.921 84.8071 63.8574C85.0894 62.7477 85.2815 61.2793 85.5594 59.1222C86.0553 55.2735 86.4123 51.8935 86.4262 48.1908C86.4411 44.232 86.3601 43.1056 85.4558 42.0608C85.019 41.5562 84.488 41.2244 83.5491 40.9481C82.5352 40.6497 81.2017 40.4573 79.1862 40.173ZM57.1664 36.849C65.2537 35.6939 71.7606 35.7391 79.6546 36.8529L79.7701 36.8692C81.6392 37.1328 83.2183 37.3555 84.4958 37.7315C85.8745 38.1372 87.0274 38.7532 87.991 39.8665C89.8087 41.9666 89.7969 44.4583 89.7811 47.7688C89.7804 47.9121 89.7797 48.057 89.7792 48.2034C89.7645 52.1184 89.3857 55.6634 88.8849 59.5506L88.8717 59.6535C88.6103 61.682 88.395 63.3537 88.0566 64.6839C87.7008 66.0827 87.169 67.282 86.1624 68.2678C85.1645 69.245 83.9854 69.7528 82.6119 70.0778C81.3149 70.3848 79.7011 70.5584 77.7558 70.7676L77.6513 70.7789C70.7551 71.5207 65.5465 71.5249 58.6684 70.7745L58.5622 70.7629C56.6442 70.5537 55.0471 70.3795 53.7599 70.0681C52.3915 69.7371 51.2202 69.219 50.2249 68.2296C49.2263 67.2369 48.7018 66.0571 48.3623 64.6788C48.0421 63.3788 47.856 61.7601 47.6318 59.8109L47.6197 59.7053C47.1588 55.6989 46.906 52.0546 47.0325 47.9659C47.037 47.8176 47.0414 47.6709 47.0458 47.5257C47.144 44.24 47.2178 41.7754 49.019 39.7623C49.9747 38.6942 51.1043 38.102 52.449 37.7089C53.6962 37.3444 55.2339 37.1249 57.0541 36.865C57.0914 36.8597 57.1288 36.8543 57.1664 36.849Z"
|
||||
class="fill-n-slate-10"
|
||||
/>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="paint0_radial_797_91519"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(68 54) rotate(90) scale(54 68)"
|
||||
>
|
||||
<stop
|
||||
offset="0.527769"
|
||||
stop-color="var(--gradient-end)"
|
||||
stop-opacity="0.9"
|
||||
/>
|
||||
<stop offset="1" stop-color="var(--gradient-end)" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
--gradient-start: #fcfcfd;
|
||||
--gradient-end: #fcfcfd;
|
||||
}
|
||||
|
||||
body.dark svg,
|
||||
.htw-dark svg {
|
||||
--gradient-start: #121213;
|
||||
--gradient-end: #121213;
|
||||
}
|
||||
|
||||
.svg-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
235
app/javascript/dashboard/components-next/captain/PageLayout.vue
Normal file
235
app/javascript/dashboard/components-next/captain/PageLayout.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { OnClickOutside } from '@vueuse/components';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMapGetter } from 'dashboard/composables/store.js';
|
||||
import { usePolicy } from 'dashboard/composables/usePolicy';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import BackButton from 'dashboard/components/widgets/BackButton.vue';
|
||||
import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
|
||||
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
|
||||
import Policy from 'dashboard/components/policy.vue';
|
||||
import AssistantSwitcher from 'dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue';
|
||||
import CreateAssistantDialog from 'dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue';
|
||||
|
||||
const props = defineProps({
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
totalCount: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
itemsPerPage: {
|
||||
type: Number,
|
||||
default: 25,
|
||||
},
|
||||
headerTitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
backUrl: {
|
||||
type: [String, Object],
|
||||
default: '',
|
||||
},
|
||||
buttonPolicy: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
featureFlag: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
isFetching: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showKnowMore: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isEmpty: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showPaginationFooter: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showAssistantSwitcher: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click', 'close', 'update:currentPage']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const route = useRoute();
|
||||
const { shouldShowPaywall } = usePolicy();
|
||||
|
||||
const showAssistantSwitcherDropdown = ref(false);
|
||||
const createAssistantDialogRef = ref(null);
|
||||
|
||||
const assistants = useMapGetter('captainAssistants/getRecords');
|
||||
const uiFlags = useMapGetter('captainAssistants/getUIFlags');
|
||||
|
||||
const currentAssistantId = computed(() => route.params.assistantId);
|
||||
const isFetchingAssistants = computed(() => uiFlags.value?.fetchingList);
|
||||
|
||||
const activeAssistantName = computed(() => {
|
||||
return (
|
||||
assistants.value?.find(
|
||||
assistant => assistant.id === Number(currentAssistantId.value)
|
||||
)?.name || t('CAPTAIN.ASSISTANT_SWITCHER.NEW_ASSISTANT')
|
||||
);
|
||||
});
|
||||
|
||||
const showPaywall = computed(() => {
|
||||
return shouldShowPaywall(props.featureFlag);
|
||||
});
|
||||
|
||||
const handleButtonClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
|
||||
const handlePageChange = event => {
|
||||
emit('update:currentPage', event);
|
||||
};
|
||||
|
||||
const toggleAssistantSwitcher = () => {
|
||||
showAssistantSwitcherDropdown.value = !showAssistantSwitcherDropdown.value;
|
||||
};
|
||||
|
||||
const handleCreateAssistant = () => {
|
||||
showAssistantSwitcherDropdown.value = false;
|
||||
createAssistantDialogRef.value.dialogRef.open();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
|
||||
<header class="sticky top-0 z-10 px-6">
|
||||
<div class="w-full max-w-[60rem] mx-auto">
|
||||
<div
|
||||
class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
|
||||
>
|
||||
<div class="flex gap-3 items-center">
|
||||
<BackButton v-if="backUrl" :back-url="backUrl" />
|
||||
<div
|
||||
v-if="showAssistantSwitcher && !showPaywall"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
v-if="!isFetchingAssistants"
|
||||
class="text-xl font-medium truncate text-n-slate-12"
|
||||
>
|
||||
{{ activeAssistantName }}
|
||||
</span>
|
||||
<div class="relative group">
|
||||
<OnClickOutside
|
||||
@trigger="showAssistantSwitcherDropdown = false"
|
||||
>
|
||||
<Button
|
||||
icon="i-lucide-chevron-down"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="xs"
|
||||
:disabled="isFetchingAssistants"
|
||||
:is-loading="isFetchingAssistants"
|
||||
class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
|
||||
@click="toggleAssistantSwitcher"
|
||||
/>
|
||||
|
||||
<AssistantSwitcher
|
||||
v-if="showAssistantSwitcherDropdown"
|
||||
class="absolute ltr:left-0 rtl:right-0 top-9"
|
||||
@close="showAssistantSwitcherDropdown = false"
|
||||
@create-assistant="handleCreateAssistant"
|
||||
/>
|
||||
</OnClickOutside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div
|
||||
v-if="showAssistantSwitcher && !showPaywall && headerTitle"
|
||||
class="w-0.5 h-4 rounded-2xl bg-n-weak"
|
||||
/>
|
||||
<span
|
||||
v-if="headerTitle"
|
||||
class="text-xl font-medium text-n-slate-12"
|
||||
>
|
||||
{{ headerTitle }}
|
||||
</span>
|
||||
<div
|
||||
v-if="!isEmpty && showKnowMore"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
|
||||
<slot name="knowMore" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<slot name="search" />
|
||||
<div
|
||||
v-if="!showPaywall && buttonLabel"
|
||||
v-on-clickaway="() => emit('close')"
|
||||
class="relative group/captain-button"
|
||||
>
|
||||
<Policy :permissions="buttonPolicy">
|
||||
<Button
|
||||
:label="buttonLabel"
|
||||
icon="i-lucide-plus"
|
||||
size="sm"
|
||||
class="group-hover/captain-button:brightness-110"
|
||||
@click="handleButtonClick"
|
||||
/>
|
||||
</Policy>
|
||||
<slot name="action" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="subHeader" />
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 px-6 overflow-y-auto">
|
||||
<div class="w-full max-w-[60rem] h-full mx-auto py-4">
|
||||
<slot v-if="!showPaywall" name="controls" />
|
||||
<div
|
||||
v-if="isFetching"
|
||||
class="flex items-center justify-center py-10 text-n-slate-11"
|
||||
>
|
||||
<Spinner />
|
||||
</div>
|
||||
<div v-else-if="showPaywall">
|
||||
<slot name="paywall" />
|
||||
</div>
|
||||
<div v-else-if="isEmpty">
|
||||
<slot name="emptyState" />
|
||||
</div>
|
||||
<slot v-else name="body" />
|
||||
<slot />
|
||||
</div>
|
||||
</main>
|
||||
<footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
|
||||
<PaginationFooter
|
||||
:current-page="currentPage"
|
||||
:total-items="totalCount"
|
||||
:items-per-page="itemsPerPage"
|
||||
@update:current-page="handlePageChange"
|
||||
/>
|
||||
</footer>
|
||||
<CreateAssistantDialog ref="createAssistantDialogRef" type="create" />
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
import AddNewRulesDialog from './AddNewRulesDialog.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/AddNewRulesDialog"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Default">
|
||||
<div class="px-4 py-4 bg-n-background h-[200px]">
|
||||
<AddNewRulesDialog
|
||||
button-label="Add a guardrail"
|
||||
placeholder="Type in another guardrail..."
|
||||
confirm-label="Create"
|
||||
cancel-label="Cancel"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
|
||||
|
||||
defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
buttonLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
confirmLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
cancelLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['add']);
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: String,
|
||||
default: '',
|
||||
});
|
||||
|
||||
const [showPopover, togglePopover] = useToggle();
|
||||
const onClickAdd = () => {
|
||||
if (!modelValue.value?.trim()) return;
|
||||
emit('add', modelValue.value.trim());
|
||||
modelValue.value = '';
|
||||
togglePopover(false);
|
||||
};
|
||||
|
||||
const onClickCancel = () => {
|
||||
togglePopover(false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => togglePopover(false)"
|
||||
class="inline-flex relative"
|
||||
>
|
||||
<Button
|
||||
:label="buttonLabel"
|
||||
sm
|
||||
slate
|
||||
class="flex-shrink-0"
|
||||
@click="togglePopover(!showPopover)"
|
||||
/>
|
||||
<div
|
||||
v-if="showPopover"
|
||||
class="absolute w-[26.5rem] top-9 z-50 ltr:left-0 rtl:right-0 flex flex-col gap-5 bg-n-alpha-3 backdrop-blur-[100px] p-4 rounded-xl border border-n-weak shadow-md"
|
||||
>
|
||||
<InlineInput
|
||||
v-model="modelValue"
|
||||
:placeholder="placeholder"
|
||||
@keyup.enter="onClickAdd"
|
||||
/>
|
||||
<div class="flex gap-2 justify-between">
|
||||
<Button
|
||||
:label="cancelLabel"
|
||||
sm
|
||||
link
|
||||
slate
|
||||
class="h-10 hover:!no-underline"
|
||||
@click="onClickCancel"
|
||||
/>
|
||||
<Button :label="confirmLabel" sm @click="onClickAdd" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup>
|
||||
import AddNewRulesInput from './AddNewRulesInput.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/AddNewRulesInput"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Default">
|
||||
<div class="px-6 py-4 bg-n-background">
|
||||
<AddNewRulesInput
|
||||
placeholder="Type in another response guideline..."
|
||||
label="Add and save (↵)"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
|
||||
|
||||
defineProps({
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['add']);
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: String,
|
||||
default: '',
|
||||
});
|
||||
|
||||
const onClickAdd = () => {
|
||||
if (!modelValue.value?.trim()) return;
|
||||
emit('add', modelValue.value.trim());
|
||||
modelValue.value = '';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex py-3 ltr:pl-3 h-16 rtl:pr-3 ltr:pr-4 rtl:pl-4 items-center gap-3 rounded-xl bg-n-solid-2 outline-1 outline outline-n-container"
|
||||
>
|
||||
<Icon icon="i-lucide-plus" class="text-n-slate-10 size-5 flex-shrink-0" />
|
||||
|
||||
<InlineInput
|
||||
v-model="modelValue"
|
||||
:placeholder="placeholder"
|
||||
@keyup.enter="onClickAdd"
|
||||
/>
|
||||
<Button
|
||||
:label="label"
|
||||
ghost
|
||||
xs
|
||||
slate
|
||||
class="!text-sm !text-n-slate-11 flex-shrink-0"
|
||||
@click="onClickAdd"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup>
|
||||
import { computed, reactive } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
|
||||
import Editor from 'dashboard/components-next/Editor/Editor.vue';
|
||||
|
||||
const emit = defineEmits(['add']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const [showPopover, togglePopover] = useToggle();
|
||||
|
||||
const state = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
instruction: '',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
title: { required, minLength: minLength(1) },
|
||||
description: { required },
|
||||
instruction: { required },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(rules, state);
|
||||
|
||||
const titleError = computed(() =>
|
||||
v$.value.title.$error
|
||||
? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
|
||||
: ''
|
||||
);
|
||||
|
||||
const descriptionError = computed(() =>
|
||||
v$.value.description.$error
|
||||
? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
|
||||
: ''
|
||||
);
|
||||
|
||||
const instructionError = computed(() =>
|
||||
v$.value.instruction.$error
|
||||
? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
|
||||
: ''
|
||||
);
|
||||
|
||||
const resetState = () => {
|
||||
Object.assign(state, {
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
instruction: '',
|
||||
});
|
||||
};
|
||||
|
||||
const onClickAdd = async () => {
|
||||
v$.value.$touch();
|
||||
if (v$.value.$invalid) return;
|
||||
|
||||
await emit('add', state);
|
||||
resetState();
|
||||
togglePopover(false);
|
||||
};
|
||||
|
||||
const onClickCancel = () => {
|
||||
togglePopover(false);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-on-click-outside="() => togglePopover(false)"
|
||||
class="inline-flex relative"
|
||||
>
|
||||
<Button
|
||||
:label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.CREATE')"
|
||||
sm
|
||||
slate
|
||||
class="flex-shrink-0"
|
||||
@click="togglePopover(!showPopover)"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="showPopover"
|
||||
class="w-[31.25rem] absolute top-10 ltr:left-0 rtl:right-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 z-50"
|
||||
>
|
||||
<h3 class="text-base font-medium text-n-slate-12">
|
||||
{{ t(`CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.TITLE`) }}
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<Input
|
||||
v-model="state.title"
|
||||
:label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
|
||||
"
|
||||
:message="titleError"
|
||||
:message-type="titleError ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
v-model="state.description"
|
||||
:label="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
|
||||
"
|
||||
:placeholder="
|
||||
t(
|
||||
'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER'
|
||||
)
|
||||
"
|
||||
:message="descriptionError"
|
||||
:message-type="descriptionError ? 'error' : 'info'"
|
||||
show-character-count
|
||||
/>
|
||||
<Editor
|
||||
v-model="state.instruction"
|
||||
:label="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
|
||||
"
|
||||
:placeholder="
|
||||
t(
|
||||
'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER'
|
||||
)
|
||||
"
|
||||
:message="instructionError"
|
||||
:message-type="instructionError ? 'error' : 'info'"
|
||||
:show-character-count="false"
|
||||
enable-captain-tools
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between w-full gap-3">
|
||||
<Button
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CANCEL')"
|
||||
class="w-full bg-n-alpha-2 !text-n-blue-text hover:bg-n-alpha-3"
|
||||
@click="onClickCancel"
|
||||
/>
|
||||
<Button
|
||||
:label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CREATE')"
|
||||
class="w-full"
|
||||
@click="onClickAdd"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import AssistantCard from './AssistantCard.vue';
|
||||
import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/AssistantCard"
|
||||
:layout="{ type: 'grid', width: '700px' }"
|
||||
>
|
||||
<Variant title="Assistant Card">
|
||||
<div
|
||||
v-for="(assistant, index) in assistantsList"
|
||||
:key="index"
|
||||
class="px-20 py-4 bg-n-background"
|
||||
>
|
||||
<AssistantCard
|
||||
:id="assistant.id"
|
||||
:name="assistant.name"
|
||||
:description="assistant.description"
|
||||
:updated-at="assistant.updated_at || assistant.created_at"
|
||||
:created-at="assistant.created_at"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { usePolicy } from 'dashboard/composables/usePolicy';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
updatedAt: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['action']);
|
||||
const { checkPermissions } = usePolicy();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const [showActionsDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const menuItems = computed(() => {
|
||||
const allOptions = [
|
||||
{
|
||||
label: t('CAPTAIN.ASSISTANTS.OPTIONS.VIEW_CONNECTED_INBOXES'),
|
||||
value: 'viewConnectedInboxes',
|
||||
action: 'viewConnectedInboxes',
|
||||
icon: 'i-lucide-link',
|
||||
},
|
||||
];
|
||||
|
||||
if (checkPermissions(['administrator'])) {
|
||||
allOptions.push(
|
||||
{
|
||||
label: t('CAPTAIN.ASSISTANTS.OPTIONS.EDIT_ASSISTANT'),
|
||||
value: 'edit',
|
||||
action: 'edit',
|
||||
icon: 'i-lucide-pencil-line',
|
||||
},
|
||||
{
|
||||
label: t('CAPTAIN.ASSISTANTS.OPTIONS.DELETE_ASSISTANT'),
|
||||
value: 'delete',
|
||||
action: 'delete',
|
||||
icon: 'i-lucide-trash',
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return allOptions;
|
||||
});
|
||||
|
||||
const lastUpdatedAt = computed(() => dynamicTime(props.updatedAt));
|
||||
|
||||
const handleAction = ({ action, value }) => {
|
||||
toggleDropdown(false);
|
||||
emit('action', { action, value, id: props.id });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout>
|
||||
<div class="flex justify-between w-full gap-1">
|
||||
<h6
|
||||
class="text-base font-normal text-n-slate-12 line-clamp-1 hover:underline transition-colors"
|
||||
>
|
||||
{{ name }}
|
||||
</h6>
|
||||
<div class="flex items-center gap-2">
|
||||
<div
|
||||
v-on-clickaway="() => toggleDropdown(false)"
|
||||
class="relative flex items-center group"
|
||||
>
|
||||
<Button
|
||||
icon="i-lucide-ellipsis-vertical"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showActionsDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 top-full"
|
||||
@action="handleAction($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-full gap-4">
|
||||
<span class="text-sm truncate text-n-slate-11">
|
||||
{{ description || 'Description not available' }}
|
||||
</span>
|
||||
<span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
|
||||
{{ lastUpdatedAt }}
|
||||
</span>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||
import MessageList from './MessageList.vue';
|
||||
import CaptainAssistant from 'dashboard/api/captain/assistant';
|
||||
|
||||
const { assistantId } = defineProps({
|
||||
assistantId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const messages = ref([]);
|
||||
const newMessage = ref('');
|
||||
const isLoading = ref(false);
|
||||
|
||||
const formatMessagesForApi = () => {
|
||||
return messages.value.map(message => ({
|
||||
role: message.sender,
|
||||
content: message.content,
|
||||
}));
|
||||
};
|
||||
|
||||
const resetConversation = () => {
|
||||
messages.value = [];
|
||||
newMessage.value = '';
|
||||
};
|
||||
|
||||
// Watch for assistant ID changes and reset conversation
|
||||
watch(
|
||||
() => assistantId,
|
||||
(newId, oldId) => {
|
||||
if (oldId && newId !== oldId) {
|
||||
resetConversation();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const sendMessage = async () => {
|
||||
if (!newMessage.value.trim() || isLoading.value) return;
|
||||
|
||||
const userMessage = {
|
||||
content: newMessage.value,
|
||||
sender: 'user',
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
messages.value.push(userMessage);
|
||||
const currentMessage = newMessage.value;
|
||||
newMessage.value = '';
|
||||
|
||||
try {
|
||||
isLoading.value = true;
|
||||
const { data } = await CaptainAssistant.playground({
|
||||
assistantId,
|
||||
messageContent: currentMessage,
|
||||
messageHistory: formatMessagesForApi(),
|
||||
});
|
||||
|
||||
messages.value.push({
|
||||
content: data.response,
|
||||
sender: 'assistant',
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('Error getting assistant response:', error);
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col h-full rounded-xl border py-6 border-n-weak text-n-slate-11"
|
||||
>
|
||||
<div class="mb-8 px-6">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h3 class="text-lg font-medium">
|
||||
{{ t('CAPTAIN.PLAYGROUND.HEADER') }}
|
||||
</h3>
|
||||
<NextButton
|
||||
ghost
|
||||
sm
|
||||
slate
|
||||
icon="i-lucide-rotate-ccw"
|
||||
@click="resetConversation"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ t('CAPTAIN.PLAYGROUND.DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<MessageList :messages="messages" :is-loading="isLoading" />
|
||||
|
||||
<div
|
||||
class="flex items-center mx-6 bg-n-background outline outline-1 outline-n-weak rounded-xl p-3"
|
||||
>
|
||||
<input
|
||||
v-model="newMessage"
|
||||
class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0 text-n-slate-12 placeholder:text-n-slate-10"
|
||||
:placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
|
||||
@keyup.enter="sendMessage"
|
||||
/>
|
||||
<NextButton
|
||||
ghost
|
||||
sm
|
||||
:disabled="!newMessage.trim()"
|
||||
icon="i-lucide-send"
|
||||
@click="sendMessage"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-n-slate-11 pt-2 text-center">
|
||||
{{ t('CAPTAIN.PLAYGROUND.CREDIT_NOTE') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,102 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
allItems: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
selectAllLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selectedCountLabel: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
deleteLabel: {
|
||||
type: String,
|
||||
default: 'Delete',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['bulkDelete']);
|
||||
|
||||
const modelValue = defineModel({
|
||||
type: Set,
|
||||
default: () => new Set(),
|
||||
});
|
||||
|
||||
const selectedCount = computed(() => modelValue.value.size);
|
||||
const totalCount = computed(() => props.allItems.length);
|
||||
|
||||
const hasSelected = computed(() => selectedCount.value > 0);
|
||||
const isIndeterminate = computed(
|
||||
() => hasSelected.value && selectedCount.value < totalCount.value
|
||||
);
|
||||
const allSelected = computed(
|
||||
() => totalCount.value > 0 && selectedCount.value === totalCount.value
|
||||
);
|
||||
|
||||
const bulkCheckboxState = computed({
|
||||
get: () => allSelected.value,
|
||||
set: shouldSelectAll => {
|
||||
const newSelectedIds = shouldSelectAll
|
||||
? new Set(props.allItems.map(item => item.id))
|
||||
: new Set();
|
||||
modelValue.value = newSelectedIds;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<transition
|
||||
name="slide-fade"
|
||||
enter-active-class="transition-all duration-300 ease-out"
|
||||
enter-from-class="opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4"
|
||||
enter-to-class="opacity-100 transform translate-x-0"
|
||||
leave-active-class="hidden opacity-0"
|
||||
>
|
||||
<div
|
||||
v-if="hasSelected"
|
||||
class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-1.5 min-w-0">
|
||||
<Checkbox
|
||||
v-model="bulkCheckboxState"
|
||||
:indeterminate="isIndeterminate"
|
||||
/>
|
||||
<span
|
||||
class="text-sm font-medium truncate text-n-slate-12 tabular-nums"
|
||||
>
|
||||
{{ selectAllLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-sm text-n-slate-10 truncate tabular-nums">
|
||||
{{ selectedCountLabel }}
|
||||
</span>
|
||||
<div class="h-4 w-px bg-n-strong" />
|
||||
<slot name="secondary-actions" />
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<slot name="actions" :selected-count="selectedCount">
|
||||
<Button
|
||||
:label="deleteLabel"
|
||||
sm
|
||||
ruby
|
||||
ghost
|
||||
class="!px-1.5"
|
||||
icon="i-lucide-trash"
|
||||
@click="emit('bulkDelete')"
|
||||
/>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-3">
|
||||
<slot name="default-actions" />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import DocumentCard from './DocumentCard.vue';
|
||||
import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/DocumentCard"
|
||||
:layout="{ type: 'grid', width: '700px' }"
|
||||
>
|
||||
<Variant title="Document Card">
|
||||
<div
|
||||
v-for="(doc, index) in documentsList"
|
||||
:key="index"
|
||||
class="px-20 py-4 bg-n-background"
|
||||
>
|
||||
<DocumentCard
|
||||
:id="doc.id"
|
||||
:name="doc.name"
|
||||
:external-link="doc.external_link"
|
||||
:assistant="doc.assistant"
|
||||
:created-at="doc.created_at"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
import { usePolicy } from 'dashboard/composables/usePolicy';
|
||||
import {
|
||||
isPdfDocument,
|
||||
formatDocumentLink,
|
||||
} from 'shared/helpers/documentHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
assistant: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
externalLink: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
createdAt: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['action']);
|
||||
const { checkPermissions } = usePolicy();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const [showActionsDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const menuItems = computed(() => {
|
||||
const allOptions = [
|
||||
{
|
||||
label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
|
||||
value: 'viewRelatedQuestions',
|
||||
action: 'viewRelatedQuestions',
|
||||
icon: 'i-ph-tree-view-duotone',
|
||||
},
|
||||
];
|
||||
|
||||
if (checkPermissions(['administrator'])) {
|
||||
allOptions.push({
|
||||
label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
|
||||
value: 'delete',
|
||||
action: 'delete',
|
||||
icon: 'i-lucide-trash',
|
||||
});
|
||||
}
|
||||
|
||||
return allOptions;
|
||||
});
|
||||
|
||||
const createdAt = computed(() => dynamicTime(props.createdAt));
|
||||
|
||||
const displayLink = computed(() => formatDocumentLink(props.externalLink));
|
||||
const linkIcon = computed(() =>
|
||||
isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
|
||||
);
|
||||
|
||||
const handleAction = ({ action, value }) => {
|
||||
toggleDropdown(false);
|
||||
emit('action', { action, value, id: props.id });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout>
|
||||
<div class="flex gap-1 justify-between w-full">
|
||||
<span class="text-base text-n-slate-12 line-clamp-1">
|
||||
{{ name }}
|
||||
</span>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div
|
||||
v-on-clickaway="() => toggleDropdown(false)"
|
||||
class="flex relative items-center group"
|
||||
>
|
||||
<Button
|
||||
icon="i-lucide-ellipsis-vertical"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showActionsDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="top-full mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0"
|
||||
@action="handleAction($event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 justify-between items-center w-full">
|
||||
<span
|
||||
class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
|
||||
>
|
||||
<i class="i-woot-captain" />
|
||||
{{ assistant?.name || '' }}
|
||||
</span>
|
||||
<span
|
||||
class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
|
||||
>
|
||||
<i :class="linkIcon" class="shrink-0" />
|
||||
<span class="truncate">{{ displayLink }}</span>
|
||||
</span>
|
||||
<div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
|
||||
{{ createdAt }}
|
||||
</div>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
import InboxCard from './InboxCard.vue';
|
||||
import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/InboxCard"
|
||||
:layout="{ type: 'grid', width: '700px' }"
|
||||
>
|
||||
<Variant title="Inbox Card">
|
||||
<div
|
||||
v-for="inbox in inboxes"
|
||||
:key="inbox.id"
|
||||
class="px-20 py-4 bg-n-background"
|
||||
>
|
||||
<InboxCard :id="inbox.id" :inbox="inbox" />
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Policy from 'dashboard/components/policy.vue';
|
||||
import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
inbox: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['action']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const [showActionsDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const inboxName = computed(() => {
|
||||
const inbox = props.inbox;
|
||||
if (!inbox?.name) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const isTwilioChannel = inbox.channel_type === INBOX_TYPES.TWILIO;
|
||||
const isWhatsAppChannel = inbox.channel_type === INBOX_TYPES.WHATSAPP;
|
||||
const isEmailChannel = inbox.channel_type === INBOX_TYPES.EMAIL;
|
||||
|
||||
if (isTwilioChannel || isWhatsAppChannel) {
|
||||
const identifier = inbox.messaging_service_sid || inbox.phone_number;
|
||||
return identifier ? `${inbox.name} (${identifier})` : inbox.name;
|
||||
}
|
||||
|
||||
if (isEmailChannel && inbox.email) {
|
||||
return `${inbox.name} (${inbox.email})`;
|
||||
}
|
||||
|
||||
return inbox.name;
|
||||
});
|
||||
|
||||
const menuItems = computed(() => [
|
||||
{
|
||||
label: t('CAPTAIN.INBOXES.OPTIONS.DISCONNECT'),
|
||||
value: 'delete',
|
||||
action: 'delete',
|
||||
icon: 'i-lucide-trash',
|
||||
},
|
||||
]);
|
||||
|
||||
const icon = computed(() => {
|
||||
const { medium, channel_type: type } = props.inbox;
|
||||
return getInboxIconByType(type, medium, 'outline');
|
||||
});
|
||||
|
||||
const handleAction = ({ action, value }) => {
|
||||
toggleDropdown(false);
|
||||
emit('action', { action, value, id: props.id });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout>
|
||||
<div class="flex justify-between w-full gap-1">
|
||||
<span
|
||||
class="text-base text-n-slate-12 line-clamp-1 flex items-center gap-2"
|
||||
>
|
||||
<span :class="icon" />
|
||||
{{ inboxName }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<Policy
|
||||
v-on-clickaway="() => toggleDropdown(false)"
|
||||
:permissions="['administrator']"
|
||||
class="relative flex items-center group"
|
||||
>
|
||||
<Button
|
||||
icon="i-lucide-ellipsis-vertical"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showActionsDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="mt-1 ltr:right-0 rtl:left-0 top-full"
|
||||
@action="handleAction($event)"
|
||||
/>
|
||||
</Policy>
|
||||
</div>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
|
||||
const props = defineProps({
|
||||
messages: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const messageContainer = ref(null);
|
||||
|
||||
const { t } = useI18n();
|
||||
const { formatMessage } = useMessageFormatter();
|
||||
|
||||
const isUserMessage = sender => sender === 'user';
|
||||
|
||||
const getMessageAlignment = sender =>
|
||||
isUserMessage(sender) ? 'justify-end' : 'justify-start';
|
||||
|
||||
const getMessageDirection = sender =>
|
||||
isUserMessage(sender) ? 'flex-row-reverse' : 'flex-row';
|
||||
|
||||
const getAvatarName = sender =>
|
||||
isUserMessage(sender)
|
||||
? t('CAPTAIN.PLAYGROUND.USER')
|
||||
: t('CAPTAIN.PLAYGROUND.ASSISTANT');
|
||||
|
||||
const getMessageStyle = sender =>
|
||||
isUserMessage(sender)
|
||||
? 'bg-n-solid-blue text-n-slate-12 rounded-br-sm rounded-bl-xl rounded-t-xl'
|
||||
: 'bg-n-solid-iris text-n-slate-12 rounded-bl-sm rounded-br-xl rounded-t-xl';
|
||||
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick();
|
||||
if (messageContainer.value) {
|
||||
messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => props.messages.length, scrollToBottom);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="messageContainer"
|
||||
class="flex-1 overflow-y-auto mb-4 px-6 space-y-6"
|
||||
>
|
||||
<div
|
||||
v-for="(message, index) in messages"
|
||||
:key="index"
|
||||
class="flex"
|
||||
:class="getMessageAlignment(message.sender)"
|
||||
>
|
||||
<div
|
||||
class="flex items-end gap-1.5 max-w-[90%] md:max-w-[60%]"
|
||||
:class="getMessageDirection(message.sender)"
|
||||
>
|
||||
<Avatar
|
||||
:name="getAvatarName(message.sender)"
|
||||
rounded-full
|
||||
:size="24"
|
||||
class="shrink-0"
|
||||
/>
|
||||
<div
|
||||
class="px-4 py-3 text-sm [overflow-wrap:break-word]"
|
||||
:class="getMessageStyle(message.sender)"
|
||||
>
|
||||
<div v-html="formatMessage(message.content)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isLoading" class="flex justify-start">
|
||||
<div class="flex items-start gap-1.5">
|
||||
<Avatar :name="getAvatarName('assistant')" rounded-full :size="24" />
|
||||
<div
|
||||
class="max-w-sm rounded-lg p-3 text-sm bg-n-solid-iris text-n-slate-12"
|
||||
>
|
||||
<div class="flex gap-1">
|
||||
<div class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce" />
|
||||
<div
|
||||
class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.2s]"
|
||||
/>
|
||||
<div
|
||||
class="w-2 h-2 rounded-full bg-n-iris-10 animate-bounce [animation-delay:0.4s]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import ResponseCard from './ResponseCard.vue';
|
||||
import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/ResponseCard"
|
||||
:layout="{ type: 'grid', width: '700px' }"
|
||||
>
|
||||
<Variant title="Article Card">
|
||||
<div
|
||||
v-for="(response, index) in responsesList"
|
||||
:key="index"
|
||||
class="px-20 py-4 bg-n-background"
|
||||
>
|
||||
<ResponseCard
|
||||
:id="response.id"
|
||||
:question="response.question"
|
||||
:answer="response.answer"
|
||||
:status="response.status"
|
||||
:assistant="response.assistant"
|
||||
:created-at="response.created_at"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,279 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
|
||||
import Policy from 'dashboard/components/policy.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
question: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
answer: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: 'approved',
|
||||
},
|
||||
documentable: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
assistant: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
updatedAt: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
createdAt: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showActions: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const [showActionsDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const modelValue = computed({
|
||||
get: () => props.isSelected,
|
||||
set: () => emit('select', props.id),
|
||||
});
|
||||
|
||||
const statusAction = computed(() => {
|
||||
if (props.status === 'pending') {
|
||||
return [
|
||||
{
|
||||
label: t('CAPTAIN.RESPONSES.OPTIONS.APPROVE'),
|
||||
value: 'approve',
|
||||
action: 'approve',
|
||||
icon: 'i-lucide-circle-check-big',
|
||||
},
|
||||
];
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
const menuItems = computed(() => [
|
||||
...statusAction.value,
|
||||
{
|
||||
label: t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE'),
|
||||
value: 'edit',
|
||||
action: 'edit',
|
||||
icon: 'i-lucide-pencil-line',
|
||||
},
|
||||
{
|
||||
label: t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE'),
|
||||
value: 'delete',
|
||||
action: 'delete',
|
||||
icon: 'i-lucide-trash',
|
||||
},
|
||||
]);
|
||||
|
||||
const timestamp = computed(() =>
|
||||
dynamicTime(props.updatedAt || props.createdAt)
|
||||
);
|
||||
|
||||
const handleAssistantAction = ({ action, value }) => {
|
||||
toggleDropdown(false);
|
||||
emit('action', { action, value, id: props.id });
|
||||
};
|
||||
|
||||
const handleDocumentableClick = () => {
|
||||
emit('navigate', {
|
||||
id: props.documentable.id,
|
||||
type: props.documentable.type,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout
|
||||
selectable
|
||||
class="relative"
|
||||
:class="{ 'rounded-md': compact }"
|
||||
@mouseenter="emit('hover', true)"
|
||||
@mouseleave="emit('hover', false)"
|
||||
>
|
||||
<div v-show="selectable" class="absolute top-7 ltr:left-3 rtl:right-3">
|
||||
<Checkbox v-model="modelValue" />
|
||||
</div>
|
||||
<div class="flex relative justify-between w-full gap-1">
|
||||
<span class="text-base text-n-slate-12 line-clamp-1">
|
||||
{{ question }}
|
||||
</span>
|
||||
<div v-if="!compact && showMenu" class="flex items-center gap-2">
|
||||
<Policy
|
||||
v-on-clickaway="() => toggleDropdown(false)"
|
||||
:permissions="['administrator']"
|
||||
class="relative flex items-center group"
|
||||
>
|
||||
<Button
|
||||
icon="i-lucide-ellipsis-vertical"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showActionsDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="mt-1 ltr:right-0 rtl:right-0 top-full"
|
||||
@action="handleAssistantAction($event)"
|
||||
/>
|
||||
</Policy>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-n-slate-11 text-sm line-clamp-5">
|
||||
{{ answer }}
|
||||
</span>
|
||||
<div
|
||||
v-if="!compact"
|
||||
class="flex items-start justify-between flex-col-reverse md:flex-row gap-3"
|
||||
>
|
||||
<Policy v-if="showActions" :permissions="['administrator']">
|
||||
<div class="flex items-center gap-2 sm:gap-5 w-full">
|
||||
<Button
|
||||
v-if="status === 'pending'"
|
||||
:label="$t('CAPTAIN.RESPONSES.OPTIONS.APPROVE')"
|
||||
icon="i-lucide-circle-check-big"
|
||||
sm
|
||||
link
|
||||
class="hover:!no-underline"
|
||||
@click="
|
||||
handleAssistantAction({ action: 'approve', value: 'approve' })
|
||||
"
|
||||
/>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE')"
|
||||
icon="i-lucide-pencil-line"
|
||||
sm
|
||||
slate
|
||||
link
|
||||
class="hover:!no-underline"
|
||||
@click="
|
||||
handleAssistantAction({
|
||||
action: 'edit',
|
||||
value: 'edit',
|
||||
})
|
||||
"
|
||||
/>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE')"
|
||||
icon="i-lucide-trash"
|
||||
sm
|
||||
ruby
|
||||
link
|
||||
class="hover:!no-underline"
|
||||
@click="
|
||||
handleAssistantAction({ action: 'delete', value: 'delete' })
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</Policy>
|
||||
<div
|
||||
class="flex items-center gap-3"
|
||||
:class="{ 'justify-between w-full': !showActions }"
|
||||
>
|
||||
<div class="inline-flex items-center gap-3 min-w-0">
|
||||
<span
|
||||
v-if="status === 'approved'"
|
||||
class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
|
||||
>
|
||||
<Icon icon="i-woot-captain" class="size-3.5" />
|
||||
{{ assistant?.name || '' }}
|
||||
</span>
|
||||
<div
|
||||
v-if="documentable"
|
||||
class="text-sm text-n-slate-11 grid grid-cols-[auto_1fr] items-center gap-1 min-w-0"
|
||||
>
|
||||
<Icon
|
||||
v-if="documentable.type === 'Captain::Document'"
|
||||
icon="i-ph-files-light"
|
||||
class="size-3.5"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="documentable.type === 'User'"
|
||||
icon="i-ph-user-circle-plus"
|
||||
class="size-3.5"
|
||||
/>
|
||||
<Icon
|
||||
v-else-if="documentable.type === 'Conversation'"
|
||||
icon="i-ph-chat-circle-dots"
|
||||
class="size-3.5"
|
||||
/>
|
||||
<span
|
||||
v-if="documentable.type === 'Captain::Document'"
|
||||
class="truncate"
|
||||
:title="documentable.name"
|
||||
>
|
||||
{{ documentable.name }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="documentable.type === 'User'"
|
||||
class="truncate"
|
||||
:title="documentable.available_name"
|
||||
>
|
||||
{{ documentable.available_name }}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="documentable.type === 'Conversation'"
|
||||
class="hover:underline truncate cursor-pointer"
|
||||
role="button"
|
||||
@click="handleDocumentableClick"
|
||||
>
|
||||
{{
|
||||
t(`CAPTAIN.RESPONSES.DOCUMENTABLE.CONVERSATION`, {
|
||||
id: documentable.display_id,
|
||||
})
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1"
|
||||
>
|
||||
<Icon icon="i-ph-calendar-dot" class="size-3.5" />
|
||||
{{ timestamp }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
import RuleCard from './RuleCard.vue';
|
||||
|
||||
const sampleRules = [
|
||||
{ id: 1, content: 'Block sensitive personal information', selectable: true },
|
||||
{ id: 2, content: 'Reject offensive language', selectable: true },
|
||||
{ id: 3, content: 'Deflect legal or medical advice', selectable: true },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/RuleCard"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Selectable List">
|
||||
<div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
|
||||
<RuleCard
|
||||
v-for="rule in sampleRules"
|
||||
:id="rule.id"
|
||||
:key="rule.id"
|
||||
:content="rule.content"
|
||||
:selectable="rule.selectable"
|
||||
@select="id => console.log('Selected rule', id)"
|
||||
@edit="id => console.log('Edit', id)"
|
||||
@delete="id => console.log('Delete', id)"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Non-Selectable">
|
||||
<div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
|
||||
<RuleCard id="4" content="Replies should be friendly and clear." />
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
|
||||
import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select', 'hover', 'edit', 'delete']);
|
||||
|
||||
const modelValue = computed({
|
||||
get: () => props.isSelected,
|
||||
set: () => emit('select', props.id),
|
||||
});
|
||||
|
||||
const isEditing = ref(false);
|
||||
const editedContent = ref(props.content);
|
||||
|
||||
// Local content to display to avoid flicker until parent prop updates on inline edit
|
||||
const localContent = ref(props.content);
|
||||
|
||||
// Keeps localContent in sync when parent updates content prop
|
||||
watch(
|
||||
() => props.content,
|
||||
newVal => {
|
||||
localContent.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
const startEdit = () => {
|
||||
isEditing.value = true;
|
||||
editedContent.value = props.content;
|
||||
};
|
||||
|
||||
const saveEdit = () => {
|
||||
isEditing.value = false;
|
||||
// Update local content
|
||||
localContent.value = editedContent.value;
|
||||
emit('edit', { id: props.id, content: editedContent.value });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout
|
||||
selectable
|
||||
class="relative [&>div]:!py-5 [&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4"
|
||||
layout="row"
|
||||
@mouseenter="emit('hover', true)"
|
||||
@mouseleave="emit('hover', false)"
|
||||
>
|
||||
<div v-show="selectable" class="absolute top-6 ltr:left-3 rtl:right-3">
|
||||
<Checkbox v-model="modelValue" />
|
||||
</div>
|
||||
<InlineInput
|
||||
v-if="isEditing"
|
||||
v-model="editedContent"
|
||||
focus-on-mount
|
||||
@keyup.enter="saveEdit"
|
||||
/>
|
||||
<span v-else class="flex items-center gap-2 text-sm text-n-slate-12">
|
||||
{{ localContent }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
|
||||
<span class="w-px h-4 bg-n-weak" />
|
||||
<Button
|
||||
icon="i-lucide-trash"
|
||||
slate
|
||||
xs
|
||||
ghost
|
||||
@click="emit('delete', id)"
|
||||
/>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import ScenariosCard from './ScenariosCard.vue';
|
||||
|
||||
const sampleScenarios = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Refund Order',
|
||||
description: 'User requests a refund for a recent purchase.',
|
||||
instruction:
|
||||
'Gather order details and reason for refund. Use [Order Search](tool://order_search) then submit with [Refund Payment](tool://refund_payment).',
|
||||
tools: ['order_search', 'refund_payment'],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Bug Report',
|
||||
description: 'Customer reports a bug in the mobile app.',
|
||||
instruction:
|
||||
'Ask for reproduction steps and environment. Check [Known Issues](tool://known_issues) then create ticket with [Create Bug Report](tool://bug_report_create).',
|
||||
tools: ['known_issues', 'bug_report_create'],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/ScenariosCard"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Default">
|
||||
<div
|
||||
v-for="scenario in sampleScenarios"
|
||||
:key="scenario.id"
|
||||
class="px-4 py-4 bg-n-background"
|
||||
>
|
||||
<ScenariosCard
|
||||
:id="scenario.id"
|
||||
:title="scenario.title"
|
||||
:description="scenario.description"
|
||||
:instruction="scenario.instruction"
|
||||
:tools="scenario.tools"
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,255 @@
|
||||
<script setup>
|
||||
import { computed, h, reactive, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useToggle, useElementSize } from '@vueuse/core';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
|
||||
import Editor from 'dashboard/components-next/Editor/Editor.vue';
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
|
||||
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
instruction: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
tools: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
selectable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
isSelected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select', 'hover', 'delete', 'update']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const { formatMessage } = useMessageFormatter();
|
||||
|
||||
const modelValue = computed({
|
||||
get: () => props.isSelected,
|
||||
set: () => emit('select', props.id),
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
instruction: '',
|
||||
});
|
||||
|
||||
const instructionContentRef = ref();
|
||||
|
||||
const [isEditing, toggleEditing] = useToggle();
|
||||
const [isInstructionExpanded, toggleInstructionExpanded] = useToggle();
|
||||
|
||||
const { height: contentHeight } = useElementSize(instructionContentRef);
|
||||
const needsOverlay = computed(() => contentHeight.value > 160);
|
||||
|
||||
const startEdit = () => {
|
||||
Object.assign(state, {
|
||||
id: props.id,
|
||||
title: props.title,
|
||||
description: props.description,
|
||||
instruction: props.instruction,
|
||||
tools: props.tools,
|
||||
});
|
||||
toggleEditing(true);
|
||||
};
|
||||
|
||||
const rules = {
|
||||
title: { required, minLength: minLength(1) },
|
||||
description: { required },
|
||||
instruction: { required },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(rules, state);
|
||||
|
||||
const titleError = computed(() =>
|
||||
v$.value.title.$error
|
||||
? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
|
||||
: ''
|
||||
);
|
||||
|
||||
const descriptionError = computed(() =>
|
||||
v$.value.description.$error
|
||||
? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
|
||||
: ''
|
||||
);
|
||||
|
||||
const onClickUpdate = () => {
|
||||
v$.value.$touch();
|
||||
if (v$.value.$invalid) return;
|
||||
emit('update', { ...state });
|
||||
toggleEditing(false);
|
||||
};
|
||||
|
||||
const instructionError = computed(() =>
|
||||
v$.value.instruction.$error
|
||||
? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
|
||||
: ''
|
||||
);
|
||||
|
||||
const LINK_INSTRUCTION_CLASS =
|
||||
'[&_a[href^="tool://"]]:text-n-iris-11 [&_a:not([href^="tool://"])]:text-n-slate-12 [&_a]:pointer-events-none [&_a]:cursor-default';
|
||||
|
||||
const renderInstruction = instruction => () =>
|
||||
h('p', {
|
||||
class: `text-sm text-n-slate-12 py-4 mb-0 prose prose-sm min-w-0 break-words max-w-none ${LINK_INSTRUCTION_CLASS}`,
|
||||
innerHTML: instruction,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout
|
||||
selectable
|
||||
class="relative [&>div]:!py-4"
|
||||
:class="{
|
||||
'[&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4': !isEditing,
|
||||
'[&>div]:ltr:!pr-10 [&>div]:rtl:!pl-10': isEditing,
|
||||
}"
|
||||
layout="row"
|
||||
@mouseenter="emit('hover', true)"
|
||||
@mouseleave="emit('hover', false)"
|
||||
>
|
||||
<div
|
||||
v-show="selectable && !isEditing"
|
||||
class="absolute top-[1.125rem] ltr:left-3 rtl:right-3"
|
||||
>
|
||||
<Checkbox v-model="modelValue" />
|
||||
</div>
|
||||
|
||||
<div v-if="!isEditing" class="flex flex-col w-full">
|
||||
<div class="flex items-start justify-between w-full gap-2">
|
||||
<div class="flex flex-col items-start">
|
||||
<span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
|
||||
<span class="text-sm text-n-slate-11 mt-2">
|
||||
{{ description }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- <Button label="Test" slate xs ghost class="!text-sm" />
|
||||
<span class="w-px h-4 bg-n-weak" /> -->
|
||||
<Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
|
||||
<span class="w-px h-4 bg-n-weak" />
|
||||
<Button
|
||||
icon="i-lucide-trash"
|
||||
slate
|
||||
xs
|
||||
ghost
|
||||
@click="emit('delete', id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative overflow-hidden transition-all duration-300 ease-in-out group/expandable"
|
||||
:class="{ 'cursor-pointer': needsOverlay }"
|
||||
:style="{
|
||||
maxHeight: isInstructionExpanded ? `${contentHeight}px` : '10rem',
|
||||
}"
|
||||
@click="needsOverlay ? toggleInstructionExpanded() : null"
|
||||
>
|
||||
<div ref="instructionContentRef">
|
||||
<component
|
||||
:is="renderInstruction(formatMessage(instruction, false))"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-0 w-full flex items-end justify-center text-xs text-n-slate-11 bg-gradient-to-t h-40 from-n-solid-2 via-n-solid-2 via-10% to-transparent transition-all duration-500 ease-in-out px-2 py-1 rounded pointer-events-none"
|
||||
:class="{
|
||||
'visible opacity-100': !isInstructionExpanded,
|
||||
'invisible opacity-0': isInstructionExpanded || !needsOverlay,
|
||||
}"
|
||||
>
|
||||
<Icon
|
||||
icon="i-lucide-chevron-down"
|
||||
class="text-n-slate-7 mb-4 size-4 group-hover/expandable:text-n-slate-11 transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="tools?.length"
|
||||
class="text-sm text-n-slate-11 font-medium mb-1"
|
||||
>
|
||||
{{ t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.SUGGESTED.TOOLS_USED') }}
|
||||
{{ tools?.map(tool => `@${tool}`).join(', ') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="overflow-hidden flex flex-col gap-4 w-full">
|
||||
<Input
|
||||
v-model="state.title"
|
||||
:label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
|
||||
"
|
||||
:message="titleError"
|
||||
:message-type="titleError ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
v-model="state.description"
|
||||
:label="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
|
||||
"
|
||||
:placeholder="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER')
|
||||
"
|
||||
:message="descriptionError"
|
||||
:message-type="descriptionError ? 'error' : 'info'"
|
||||
show-character-count
|
||||
/>
|
||||
<Editor
|
||||
v-model="state.instruction"
|
||||
:label="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
|
||||
"
|
||||
:placeholder="
|
||||
t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER')
|
||||
"
|
||||
:message="instructionError"
|
||||
:message-type="instructionError ? 'error' : 'info'"
|
||||
:show-character-count="false"
|
||||
enable-captain-tools
|
||||
/>
|
||||
<div class="flex items-center gap-3">
|
||||
<Button
|
||||
faded
|
||||
slate
|
||||
sm
|
||||
:label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.CANCEL')"
|
||||
@click="toggleEditing(false)"
|
||||
/>
|
||||
<Button
|
||||
sm
|
||||
:label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.UPDATE')"
|
||||
@click="onClickUpdate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup>
|
||||
import SuggestedRules from './SuggestedRules.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const guidelinesExample = [
|
||||
{
|
||||
content:
|
||||
'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
|
||||
},
|
||||
{
|
||||
content:
|
||||
'Reject queries that include offensive, discriminatory, or threatening language.',
|
||||
},
|
||||
{
|
||||
content:
|
||||
'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/SuggestedRules"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Suggested Rules List">
|
||||
<div class="px-20 py-4 bg-n-background">
|
||||
<SuggestedRules
|
||||
title="Example response guidelines"
|
||||
:items="guidelinesExample"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<span class="text-sm text-n-slate-12">{{ item.content }}</span>
|
||||
<Button
|
||||
label="Add this"
|
||||
ghost
|
||||
xs
|
||||
slate
|
||||
class="!text-sm !text-n-slate-11 flex-shrink-0"
|
||||
/>
|
||||
</template>
|
||||
</SuggestedRules>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['add', 'close']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const onAddClick = () => {
|
||||
emit('add');
|
||||
};
|
||||
|
||||
const onClickClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col items-start self-stretch rounded-xl w-full overflow-hidden border border-dashed border-n-strong"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full gap-3 px-4 pb-1 pt-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<h5 class="text-sm font-medium text-n-slate-11">{{ title }}</h5>
|
||||
<span class="h-3 w-px bg-n-weak" />
|
||||
<Button
|
||||
:label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.ADD')"
|
||||
ghost
|
||||
xs
|
||||
slate
|
||||
class="!text-sm !text-n-slate-11 flex-shrink-0"
|
||||
@click="onAddClick"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
ghost
|
||||
xs
|
||||
slate
|
||||
icon="i-lucide-x"
|
||||
class="!text-sm !text-n-slate-11 flex-shrink-0"
|
||||
@click="onClickClose"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col items-start divide-y divide-n-strong divide-dashed w-full"
|
||||
>
|
||||
<div v-for="item in items" :key="item.content" class="w-full px-4 py-4">
|
||||
<slot :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import ToolsDropdown from './ToolsDropdown.vue';
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: 'order_search',
|
||||
title: 'Order Search',
|
||||
description: 'Lookup orders by customer ID, email, or order number',
|
||||
},
|
||||
{
|
||||
id: 'refund_payment',
|
||||
title: 'Refund Payment',
|
||||
description: 'Initiates a refund on a specific payment',
|
||||
},
|
||||
{
|
||||
id: 'fetch_customer',
|
||||
title: 'Fetch Customer',
|
||||
description: 'Pulls customer details (email, tags, last seen, etc.)',
|
||||
},
|
||||
];
|
||||
|
||||
const selectedIndex = ref(0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/Assistant/ToolsDropdown"
|
||||
:layout="{ type: 'grid', width: '600px' }"
|
||||
>
|
||||
<Variant title="Default">
|
||||
<div class="relative h-80 bg-n-background p-4">
|
||||
<ToolsDropdown :items="items" :selected-index="selectedIndex" />
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
items: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
selectedIndex: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['select']);
|
||||
|
||||
const toolsDropdownRef = ref(null);
|
||||
|
||||
const onItemClick = idx => emit('select', idx);
|
||||
|
||||
watch(
|
||||
() => props.selectedIndex,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
const el = toolsDropdownRef.value?.querySelector(
|
||||
`#tool-item-${props.selectedIndex}`
|
||||
);
|
||||
if (el) {
|
||||
el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
|
||||
}
|
||||
});
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="toolsDropdownRef"
|
||||
class="w-[22.5rem] p-2 flex flex-col gap-1 z-50 absolute rounded-xl bg-n-alpha-3 shadow outline outline-1 outline-n-weak backdrop-blur-[50px] max-h-[20rem] overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
v-for="(tool, idx) in items"
|
||||
:id="`tool-item-${idx}`"
|
||||
:key="tool.id || idx"
|
||||
:class="{ 'bg-n-alpha-black2': idx === selectedIndex }"
|
||||
class="flex flex-col gap-1 rounded-md py-2 px-2 cursor-pointer hover:bg-n-alpha-black2"
|
||||
@click="onItemClick(idx)"
|
||||
>
|
||||
<span class="text-n-slate-12 font-medium text-sm">{{ tool.title }}</span>
|
||||
<span class="text-n-slate-11 text-sm">{{ tool.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,59 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
bulkIds: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['deleteSuccess']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const bulkDeleteDialogRef = ref(null);
|
||||
const i18nKey = computed(() => props.type.toUpperCase());
|
||||
|
||||
const handleBulkDelete = async ids => {
|
||||
if (!ids) return;
|
||||
|
||||
try {
|
||||
await store.dispatch(
|
||||
'captainBulkActions/handleBulkDelete',
|
||||
Array.from(props.bulkIds)
|
||||
);
|
||||
|
||||
emit('deleteSuccess');
|
||||
useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.SUCCESS_MESSAGE`));
|
||||
} catch (error) {
|
||||
useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.ERROR_MESSAGE`));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDialogConfirm = async () => {
|
||||
await handleBulkDelete(Array.from(props.bulkIds));
|
||||
bulkDeleteDialogRef.value?.close();
|
||||
};
|
||||
|
||||
defineExpose({ dialogRef: bulkDeleteDialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="bulkDeleteDialogRef"
|
||||
type="alert"
|
||||
:title="t(`CAPTAIN.${i18nKey}.BULK_DELETE.TITLE`)"
|
||||
:description="t(`CAPTAIN.${i18nKey}.BULK_DELETE.DESCRIPTION`)"
|
||||
:confirm-button-label="t(`CAPTAIN.${i18nKey}.BULK_DELETE.CONFIRM`)"
|
||||
@confirm="handleDialogConfirm"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
translationKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
entity: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
deletePayload: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['deleteSuccess']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const deleteDialogRef = ref(null);
|
||||
const i18nKey = computed(() => {
|
||||
return props.translationKey || props.type.toUpperCase();
|
||||
});
|
||||
|
||||
const deleteEntity = async payload => {
|
||||
if (!payload) return;
|
||||
|
||||
try {
|
||||
await store.dispatch(`captain${props.type}/delete`, payload);
|
||||
emit('deleteSuccess');
|
||||
useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.SUCCESS_MESSAGE`));
|
||||
} catch (error) {
|
||||
useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.ERROR_MESSAGE`));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDialogConfirm = async () => {
|
||||
await deleteEntity(props.deletePayload || props.entity.id);
|
||||
deleteDialogRef.value?.close();
|
||||
};
|
||||
|
||||
defineExpose({ dialogRef: deleteDialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="deleteDialogRef"
|
||||
type="alert"
|
||||
:title="t(`CAPTAIN.${i18nKey}.DELETE.TITLE`)"
|
||||
:description="t(`CAPTAIN.${i18nKey}.DELETE.DESCRIPTION`)"
|
||||
:confirm-button-label="t(`CAPTAIN.${i18nKey}.DELETE.CONFIRM`)"
|
||||
@confirm="handleDialogConfirm"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
|
||||
import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const currentUser = useMapGetter('getCurrentUser');
|
||||
|
||||
const isSuperAdmin = computed(() => {
|
||||
return currentUser.value.type === 'SuperAdmin';
|
||||
});
|
||||
const { accountId, isOnChatwootCloud } = useAccount();
|
||||
|
||||
const i18nKey = computed(() =>
|
||||
isOnChatwootCloud.value ? 'PAYWALL' : 'ENTERPRISE_PAYWALL'
|
||||
);
|
||||
const openBilling = () => {
|
||||
router.push({
|
||||
name: 'billing_settings_index',
|
||||
params: { accountId: accountId.value },
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
|
||||
>
|
||||
<BasePaywallModal
|
||||
class="mx-auto"
|
||||
feature-prefix="CAPTAIN"
|
||||
:i18n-key="i18nKey"
|
||||
:is-super-admin="isSuperAdmin"
|
||||
:is-on-chatwoot-cloud="isOnChatwootCloud"
|
||||
@upgrade="openBilling"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,184 @@
|
||||
<script setup>
|
||||
import { reactive, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Editor from 'dashboard/components-next/Editor/Editor.vue';
|
||||
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: value => ['edit', 'create'].includes(value),
|
||||
},
|
||||
assistant: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submit', 'cancel']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = {
|
||||
uiFlags: useMapGetter('captainAssistants/getUIFlags'),
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
name: '',
|
||||
description: '',
|
||||
productName: '',
|
||||
featureFaq: false,
|
||||
featureMemory: false,
|
||||
featureCitation: false,
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
|
||||
const validationRules = {
|
||||
name: { required, minLength: minLength(1) },
|
||||
description: { required, minLength: minLength(1) },
|
||||
productName: { required, minLength: minLength(1) },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const isLoading = computed(() => formState.uiFlags.value.creatingItem);
|
||||
|
||||
const getErrorMessage = (field, errorKey) => {
|
||||
return v$.value[field].$error
|
||||
? t(`CAPTAIN.ASSISTANTS.FORM.${errorKey}.ERROR`)
|
||||
: '';
|
||||
};
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
name: getErrorMessage('name', 'NAME'),
|
||||
description: getErrorMessage('description', 'DESCRIPTION'),
|
||||
productName: getErrorMessage('productName', 'PRODUCT_NAME'),
|
||||
}));
|
||||
|
||||
const handleCancel = () => emit('cancel');
|
||||
|
||||
const prepareAssistantDetails = () => ({
|
||||
name: state.name,
|
||||
description: state.description,
|
||||
config: {
|
||||
product_name: state.productName,
|
||||
feature_faq: state.featureFaq,
|
||||
feature_memory: state.featureMemory,
|
||||
feature_citation: state.featureCitation,
|
||||
},
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const isFormValid = await v$.value.$validate();
|
||||
if (!isFormValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('submit', prepareAssistantDetails());
|
||||
};
|
||||
|
||||
const updateStateFromAssistant = assistant => {
|
||||
if (!assistant) return;
|
||||
|
||||
const { name, description, config } = assistant;
|
||||
|
||||
Object.assign(state, {
|
||||
name,
|
||||
description,
|
||||
productName: config.product_name,
|
||||
featureFaq: config.feature_faq || false,
|
||||
featureMemory: config.feature_memory || false,
|
||||
featureCitation: config.feature_citation || false,
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.assistant,
|
||||
newAssistant => {
|
||||
if (props.mode === 'edit' && newAssistant) {
|
||||
updateStateFromAssistant(newAssistant);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||
<Input
|
||||
v-model="state.name"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
|
||||
:message="formErrors.name"
|
||||
:message-type="formErrors.name ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<Editor
|
||||
v-model="state.description"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
|
||||
:message="formErrors.description"
|
||||
:message-type="formErrors.description ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="state.productName"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
|
||||
:message="formErrors.productName"
|
||||
:message-type="formErrors.productName ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<fieldset class="flex flex-col gap-2.5">
|
||||
<legend class="mb-3 text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
|
||||
</legend>
|
||||
|
||||
<label class="flex items-center gap-2">
|
||||
<input v-model="state.featureFaq" type="checkbox" />
|
||||
<span class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center gap-2">
|
||||
<input v-model="state.featureMemory" type="checkbox" />
|
||||
<span class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex items-center gap-2">
|
||||
<input v-model="state.featureCitation" type="checkbox" />
|
||||
<span class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
|
||||
</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<div class="flex items-center justify-between w-full gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="t('CAPTAIN.FORM.CANCEL')"
|
||||
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
|
||||
@click="handleCancel"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
:label="t(`CAPTAIN.FORM.${mode.toUpperCase()}`)"
|
||||
class="w-full"
|
||||
:is-loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import AssistantForm from './AssistantForm.vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectedAssistant: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'create',
|
||||
validator: value => ['create', 'edit'].includes(value),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['close', 'created']);
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
const assistantForm = ref(null);
|
||||
|
||||
const updateAssistant = assistantDetails =>
|
||||
store.dispatch('captainAssistants/update', {
|
||||
id: props.selectedAssistant.id,
|
||||
...assistantDetails,
|
||||
});
|
||||
|
||||
const i18nKey = computed(
|
||||
() => `CAPTAIN.ASSISTANTS.${props.type.toUpperCase()}`
|
||||
);
|
||||
|
||||
const createAssistant = async assistantDetails => {
|
||||
try {
|
||||
const newAssistant = await store.dispatch(
|
||||
'captainAssistants/create',
|
||||
assistantDetails
|
||||
);
|
||||
emit('created', newAssistant);
|
||||
} catch (error) {
|
||||
const errorMessage = error?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async updatedAssistant => {
|
||||
try {
|
||||
if (props.type === 'edit') {
|
||||
await updateAssistant(updatedAssistant);
|
||||
} else {
|
||||
await createAssistant(updatedAssistant);
|
||||
}
|
||||
useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
|
||||
dialogRef.value.close();
|
||||
} catch (error) {
|
||||
const errorMessage = error?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
dialogRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({ dialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
type="edit"
|
||||
:title="t(`${i18nKey}.TITLE`)"
|
||||
:description="t('CAPTAIN.ASSISTANTS.FORM_DESCRIPTION')"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
overflow-y-auto
|
||||
@close="handleClose"
|
||||
>
|
||||
<AssistantForm
|
||||
ref="assistantForm"
|
||||
:mode="type"
|
||||
:assistant="selectedAssistant"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
<template #footer />
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,151 @@
|
||||
<script setup>
|
||||
import { reactive, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Editor from 'dashboard/components-next/Editor/Editor.vue';
|
||||
|
||||
const props = defineProps({
|
||||
assistant: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const initialState = {
|
||||
name: '',
|
||||
description: '',
|
||||
productName: '',
|
||||
features: {
|
||||
conversationFaqs: false,
|
||||
memories: false,
|
||||
citations: false,
|
||||
},
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
|
||||
const validationRules = {
|
||||
name: { required, minLength: minLength(1) },
|
||||
description: { required, minLength: minLength(1) },
|
||||
productName: { required, minLength: minLength(1) },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const getErrorMessage = field => {
|
||||
return v$.value[field].$error ? v$.value[field].$errors[0].$message : '';
|
||||
};
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
name: getErrorMessage('name'),
|
||||
description: getErrorMessage('description'),
|
||||
productName: getErrorMessage('productName'),
|
||||
}));
|
||||
|
||||
const updateStateFromAssistant = assistant => {
|
||||
const { config = {} } = assistant;
|
||||
state.name = assistant.name;
|
||||
state.description = assistant.description;
|
||||
state.productName = config.product_name;
|
||||
state.features = {
|
||||
conversationFaqs: config.feature_faq || false,
|
||||
memories: config.feature_memory || false,
|
||||
citations: config.feature_citation || false,
|
||||
};
|
||||
};
|
||||
|
||||
const handleBasicInfoUpdate = async () => {
|
||||
const result = await Promise.all([
|
||||
v$.value.name.$validate(),
|
||||
v$.value.description.$validate(),
|
||||
v$.value.productName.$validate(),
|
||||
]).then(results => results.every(Boolean));
|
||||
if (!result) return;
|
||||
|
||||
const payload = {
|
||||
name: state.name,
|
||||
description: state.description,
|
||||
config: {
|
||||
...props.assistant.config,
|
||||
product_name: state.productName,
|
||||
feature_faq: state.features.conversationFaqs,
|
||||
feature_memory: state.features.memories,
|
||||
feature_citation: state.features.citations,
|
||||
},
|
||||
};
|
||||
|
||||
emit('submit', payload);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.assistant,
|
||||
newAssistant => {
|
||||
if (newAssistant) updateStateFromAssistant(newAssistant);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-6">
|
||||
<Input
|
||||
v-model="state.name"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
|
||||
:message="formErrors.name"
|
||||
:message-type="formErrors.name ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<Input
|
||||
v-model="state.productName"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
|
||||
:message="formErrors.productName"
|
||||
:message-type="formErrors.productName ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<Editor
|
||||
v-model="state.description"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
|
||||
:message="formErrors.description"
|
||||
:message-type="formErrors.description ? 'error' : 'info'"
|
||||
class="z-0"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
|
||||
</label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="flex items-center gap-2">
|
||||
<input v-model="state.features.conversationFaqs" type="checkbox" />
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input v-model="state.features.memories" type="checkbox" />
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input v-model="state.features.citations" type="checkbox" />
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
|
||||
@click="handleBasicInfoUpdate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
defineProps({
|
||||
controlItem: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const onClick = name => {
|
||||
router.push({ name });
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:key="controlItem.name"
|
||||
class="pt-3 ltr:pl-4 rtl:pr-4 ltr:pr-2 rtl:pl-2 pb-5 gap-2 flex flex-col w-full shadow outline-1 outline outline-n-container rounded-2xl bg-n-solid-2 cursor-pointer"
|
||||
@click="onClick(controlItem.routeName)"
|
||||
>
|
||||
<div class="flex items-center justify-between w-full gap-1 h-8">
|
||||
<span class="text-sm font-medium text-n-slate-12 line-clamp-1">
|
||||
{{ controlItem.name }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<Button
|
||||
icon="i-lucide-chevron-right"
|
||||
slate
|
||||
ghost
|
||||
xs
|
||||
@click="onClick(controlItem.routeName)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-n-slate-11 text-sm leading-[21px] line-clamp-5">
|
||||
{{ controlItem.description }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
import { reactive, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { minLength } from '@vuelidate/validators';
|
||||
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Editor from 'dashboard/components-next/Editor/Editor.vue';
|
||||
|
||||
const props = defineProps({
|
||||
assistant: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const { isCloudFeatureEnabled } = useAccount();
|
||||
|
||||
const isCaptainV2Enabled = computed(() =>
|
||||
isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_V2)
|
||||
);
|
||||
|
||||
const initialState = {
|
||||
handoffMessage: '',
|
||||
resolutionMessage: '',
|
||||
instructions: '',
|
||||
temperature: 1,
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
|
||||
const validationRules = {
|
||||
handoffMessage: { minLength: minLength(1) },
|
||||
resolutionMessage: { minLength: minLength(1) },
|
||||
instructions: { minLength: minLength(1) },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const getErrorMessage = field => {
|
||||
return v$.value[field].$error ? v$.value[field].$errors[0].$message : '';
|
||||
};
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
handoffMessage: getErrorMessage('handoffMessage'),
|
||||
resolutionMessage: getErrorMessage('resolutionMessage'),
|
||||
instructions: getErrorMessage('instructions'),
|
||||
}));
|
||||
|
||||
const updateStateFromAssistant = assistant => {
|
||||
const { config = {} } = assistant;
|
||||
state.handoffMessage = config.handoff_message;
|
||||
state.resolutionMessage = config.resolution_message;
|
||||
state.instructions = config.instructions;
|
||||
state.temperature = config.temperature || 1;
|
||||
};
|
||||
|
||||
const handleSystemMessagesUpdate = async () => {
|
||||
const validations = [
|
||||
v$.value.handoffMessage.$validate(),
|
||||
v$.value.resolutionMessage.$validate(),
|
||||
];
|
||||
|
||||
if (!isCaptainV2Enabled.value) {
|
||||
validations.push(v$.value.instructions.$validate());
|
||||
}
|
||||
|
||||
const result = await Promise.all(validations).then(results =>
|
||||
results.every(Boolean)
|
||||
);
|
||||
if (!result) return;
|
||||
|
||||
const payload = {
|
||||
config: {
|
||||
...props.assistant.config,
|
||||
handoff_message: state.handoffMessage,
|
||||
resolution_message: state.resolutionMessage,
|
||||
temperature: state.temperature || 1,
|
||||
},
|
||||
};
|
||||
|
||||
if (!isCaptainV2Enabled.value) {
|
||||
payload.config.instructions = state.instructions;
|
||||
}
|
||||
|
||||
emit('submit', payload);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.assistant,
|
||||
newAssistant => {
|
||||
if (newAssistant) updateStateFromAssistant(newAssistant);
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-6">
|
||||
<Editor
|
||||
v-model="state.handoffMessage"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.PLACEHOLDER')"
|
||||
:message="formErrors.handoffMessage"
|
||||
:message-type="formErrors.handoffMessage ? 'error' : 'info'"
|
||||
class="z-0"
|
||||
/>
|
||||
|
||||
<Editor
|
||||
v-model="state.resolutionMessage"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.PLACEHOLDER')"
|
||||
:message="formErrors.resolutionMessage"
|
||||
:message-type="formErrors.resolutionMessage ? 'error' : 'info'"
|
||||
class="z-0"
|
||||
/>
|
||||
|
||||
<Editor
|
||||
v-if="!isCaptainV2Enabled"
|
||||
v-model="state.instructions"
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.LABEL')"
|
||||
:placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
|
||||
:message="formErrors.instructions"
|
||||
:max-length="20000"
|
||||
:message-type="formErrors.instructions ? 'error' : 'info'"
|
||||
class="z-0"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.LABEL') }}
|
||||
</label>
|
||||
<div class="flex items-center gap-4">
|
||||
<input
|
||||
v-model="state.temperature"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
class="w-full"
|
||||
/>
|
||||
<span class="text-sm text-n-slate-12">{{ state.temperature }}</span>
|
||||
</div>
|
||||
<p class="text-sm text-n-slate-11 italic">
|
||||
{{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button
|
||||
:label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
|
||||
@click="handleSystemMessagesUpdate"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup>
|
||||
import { defineModel, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
|
||||
const props = defineProps({
|
||||
authType: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: value => ['none', 'bearer', 'basic', 'api_key'].includes(value),
|
||||
},
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const authConfig = defineModel('authConfig', {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.authType,
|
||||
() => {
|
||||
authConfig.value = {};
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Input
|
||||
v-if="authType === 'bearer'"
|
||||
v-model="authConfig.token"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.BEARER_TOKEN')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.BEARER_TOKEN_PLACEHOLDER')
|
||||
"
|
||||
/>
|
||||
<template v-else-if="authType === 'basic'">
|
||||
<Input
|
||||
v-model="authConfig.username"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.USERNAME')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.USERNAME_PLACEHOLDER')
|
||||
"
|
||||
/>
|
||||
<Input
|
||||
v-model="authConfig.password"
|
||||
type="password"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.PASSWORD')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.PASSWORD_PLACEHOLDER')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="authType === 'api_key'">
|
||||
<Input
|
||||
v-model="authConfig.name"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_KEY')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_KEY_PLACEHOLDER')
|
||||
"
|
||||
/>
|
||||
<Input
|
||||
v-model="authConfig.key"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_VALUE')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_VALUE_PLACEHOLDER')
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
|
||||
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import CustomToolForm from './CustomToolForm.vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectedTool: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'create',
|
||||
validator: value => ['create', 'edit'].includes(value),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
|
||||
const updateTool = toolDetails =>
|
||||
store.dispatch('captainCustomTools/update', {
|
||||
id: props.selectedTool.id,
|
||||
...toolDetails,
|
||||
});
|
||||
|
||||
const i18nKey = computed(
|
||||
() => `CAPTAIN.CUSTOM_TOOLS.${props.type.toUpperCase()}`
|
||||
);
|
||||
|
||||
const createTool = toolDetails =>
|
||||
store.dispatch('captainCustomTools/create', toolDetails);
|
||||
|
||||
const handleSubmit = async updatedTool => {
|
||||
try {
|
||||
if (props.type === 'edit') {
|
||||
await updateTool(updatedTool);
|
||||
} else {
|
||||
await createTool(updatedTool);
|
||||
}
|
||||
useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
|
||||
dialogRef.value.close();
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
parseAPIErrorResponse(error) || t(`${i18nKey.value}.ERROR_MESSAGE`);
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
dialogRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({ dialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
width="2xl"
|
||||
:title="$t(`${i18nKey}.TITLE`)"
|
||||
:description="$t('CAPTAIN.CUSTOM_TOOLS.FORM_DESCRIPTION')"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<CustomToolForm
|
||||
:mode="type"
|
||||
:tool="selectedTool"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
<template #footer />
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useToggle } from '@vueuse/core';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { dynamicTime } from 'shared/helpers/timeHelper';
|
||||
|
||||
import CardLayout from 'dashboard/components-next/CardLayout.vue';
|
||||
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Policy from 'dashboard/components/policy.vue';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
authType: {
|
||||
type: String,
|
||||
default: 'none',
|
||||
},
|
||||
updatedAt: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
createdAt: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['action']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const [showActionsDropdown, toggleDropdown] = useToggle();
|
||||
|
||||
const menuItems = computed(() => [
|
||||
{
|
||||
label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.EDIT_TOOL'),
|
||||
value: 'edit',
|
||||
action: 'edit',
|
||||
icon: 'i-lucide-pencil-line',
|
||||
},
|
||||
{
|
||||
label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.DELETE_TOOL'),
|
||||
value: 'delete',
|
||||
action: 'delete',
|
||||
icon: 'i-lucide-trash',
|
||||
},
|
||||
]);
|
||||
|
||||
const timestamp = computed(() =>
|
||||
dynamicTime(props.updatedAt || props.createdAt)
|
||||
);
|
||||
|
||||
const handleAction = ({ action, value }) => {
|
||||
toggleDropdown(false);
|
||||
emit('action', { action, value, id: props.id });
|
||||
};
|
||||
|
||||
const authTypeLabel = computed(() => {
|
||||
return t(
|
||||
`CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.${props.authType.toUpperCase()}`
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardLayout class="relative">
|
||||
<div class="flex relative justify-between w-full gap-1">
|
||||
<span class="text-base text-n-slate-12 line-clamp-1 font-medium">
|
||||
{{ title }}
|
||||
</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<Policy
|
||||
v-on-clickaway="() => toggleDropdown(false)"
|
||||
:permissions="['administrator']"
|
||||
class="relative flex items-center group"
|
||||
>
|
||||
<Button
|
||||
icon="i-lucide-ellipsis-vertical"
|
||||
color="slate"
|
||||
size="xs"
|
||||
class="rounded-md group-hover:bg-n-alpha-2"
|
||||
@click="toggleDropdown()"
|
||||
/>
|
||||
<DropdownMenu
|
||||
v-if="showActionsDropdown"
|
||||
:menu-items="menuItems"
|
||||
class="mt-1 ltr:right-0 rtl:right-0 top-full"
|
||||
@action="handleAction($event)"
|
||||
/>
|
||||
</Policy>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-full gap-4">
|
||||
<div class="flex items-center gap-3 flex-1">
|
||||
<span
|
||||
v-if="description"
|
||||
class="text-sm truncate text-n-slate-11 flex-1"
|
||||
>
|
||||
{{ description }}
|
||||
</span>
|
||||
<span
|
||||
v-if="authType !== 'none'"
|
||||
class="text-sm shrink-0 text-n-slate-11 inline-flex items-center gap-1"
|
||||
>
|
||||
<i class="i-lucide-lock text-base" />
|
||||
{{ authTypeLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
|
||||
{{ timestamp }}
|
||||
</span>
|
||||
</div>
|
||||
</CardLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,271 @@
|
||||
<script setup>
|
||||
import { reactive, computed, useTemplateRef, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
|
||||
import ParamRow from './ParamRow.vue';
|
||||
import AuthConfig from './AuthConfig.vue';
|
||||
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'create',
|
||||
validator: value => ['create', 'edit'].includes(value),
|
||||
},
|
||||
tool: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submit', 'cancel']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = {
|
||||
uiFlags: useMapGetter('captainCustomTools/getUIFlags'),
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
title: '',
|
||||
description: '',
|
||||
endpoint_url: '',
|
||||
http_method: 'GET',
|
||||
request_template: '',
|
||||
response_template: '',
|
||||
auth_type: 'none',
|
||||
auth_config: {},
|
||||
param_schema: [],
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
|
||||
// Populate form when in edit mode
|
||||
watch(
|
||||
() => props.tool,
|
||||
newTool => {
|
||||
if (props.mode === 'edit' && newTool && newTool.id) {
|
||||
state.title = newTool.title || '';
|
||||
state.description = newTool.description || '';
|
||||
state.endpoint_url = newTool.endpoint_url || '';
|
||||
state.http_method = newTool.http_method || 'GET';
|
||||
state.request_template = newTool.request_template || '';
|
||||
state.response_template = newTool.response_template || '';
|
||||
state.auth_type = newTool.auth_type || 'none';
|
||||
state.auth_config = newTool.auth_config || {};
|
||||
state.param_schema = newTool.param_schema || [];
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const DEFAULT_PARAM = {
|
||||
name: '',
|
||||
type: 'string',
|
||||
description: '',
|
||||
required: false,
|
||||
};
|
||||
|
||||
const validationRules = {
|
||||
title: { required },
|
||||
endpoint_url: { required },
|
||||
http_method: { required },
|
||||
auth_type: { required },
|
||||
};
|
||||
|
||||
const httpMethodOptions = computed(() => [
|
||||
{ value: 'GET', label: 'GET' },
|
||||
{ value: 'POST', label: 'POST' },
|
||||
]);
|
||||
|
||||
const authTypeOptions = computed(() => [
|
||||
{ value: 'none', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.NONE') },
|
||||
{ value: 'bearer', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.BEARER') },
|
||||
{ value: 'basic', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.BASIC') },
|
||||
{
|
||||
value: 'api_key',
|
||||
label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.API_KEY'),
|
||||
},
|
||||
]);
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const isLoading = computed(() =>
|
||||
props.mode === 'edit'
|
||||
? formState.uiFlags.value.updatingItem
|
||||
: formState.uiFlags.value.creatingItem
|
||||
);
|
||||
|
||||
const getErrorMessage = (field, errorKey) => {
|
||||
return v$.value[field].$error
|
||||
? t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.ERROR`)
|
||||
: '';
|
||||
};
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
title: getErrorMessage('title', 'TITLE'),
|
||||
endpoint_url: getErrorMessage('endpoint_url', 'ENDPOINT_URL'),
|
||||
}));
|
||||
|
||||
const paramsRef = useTemplateRef('paramsRef');
|
||||
|
||||
const isParamsValid = () => {
|
||||
if (!paramsRef.value || paramsRef.value.length === 0) {
|
||||
return true;
|
||||
}
|
||||
return paramsRef.value.every(param => param.validate());
|
||||
};
|
||||
|
||||
const removeParam = index => {
|
||||
state.param_schema.splice(index, 1);
|
||||
};
|
||||
|
||||
const addParam = () => {
|
||||
state.param_schema.push({ ...DEFAULT_PARAM });
|
||||
};
|
||||
|
||||
const handleCancel = () => emit('cancel');
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const isFormValid = await v$.value.$validate();
|
||||
if (!isFormValid || !isParamsValid()) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('submit', state);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form
|
||||
class="flex flex-col px-4 -mx-4 gap-4 max-h-[calc(100vh-200px)] overflow-y-scroll"
|
||||
@submit.prevent="handleSubmit"
|
||||
>
|
||||
<Input
|
||||
v-model="state.title"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.TITLE.LABEL')"
|
||||
:placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.TITLE.PLACEHOLDER')"
|
||||
:message="formErrors.title"
|
||||
:message-type="formErrors.title ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
v-model="state.description"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.DESCRIPTION.LABEL')"
|
||||
:placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.DESCRIPTION.PLACEHOLDER')"
|
||||
:rows="2"
|
||||
/>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-col gap-1 w-28">
|
||||
<label class="mb-0.5 text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.CUSTOM_TOOLS.FORM.HTTP_METHOD.LABEL') }}
|
||||
</label>
|
||||
<ComboBox
|
||||
v-model="state.http_method"
|
||||
:options="httpMethodOptions"
|
||||
class="[&>div>button]:bg-n-alpha-black2 [&_li]:font-mono [&_button]:font-mono [&>div>button]:outline-offset-[-1px]"
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
v-model="state.endpoint_url"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.ENDPOINT_URL.LABEL')"
|
||||
:placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.ENDPOINT_URL.PLACEHOLDER')"
|
||||
:message="formErrors.endpoint_url"
|
||||
:message-type="formErrors.endpoint_url ? 'error' : 'info'"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="mb-0.5 text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPE.LABEL') }}
|
||||
</label>
|
||||
<ComboBox
|
||||
v-model="state.auth_type"
|
||||
:options="authTypeOptions"
|
||||
class="[&>div>button]:bg-n-alpha-black2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AuthConfig
|
||||
v-model:auth-config="state.auth_config"
|
||||
:auth-type="state.auth_type"
|
||||
/>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAMETERS.LABEL') }}
|
||||
</label>
|
||||
<p class="text-xs text-n-slate-11 -mt-1">
|
||||
{{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAMETERS.HELP_TEXT') }}
|
||||
</p>
|
||||
<ul v-if="state.param_schema.length > 0" class="grid gap-2 list-none">
|
||||
<ParamRow
|
||||
v-for="(param, index) in state.param_schema"
|
||||
:key="index"
|
||||
ref="paramsRef"
|
||||
v-model:name="param.name"
|
||||
v-model:type="param.type"
|
||||
v-model:description="param.description"
|
||||
v-model:required="param.required"
|
||||
@remove="removeParam(index)"
|
||||
/>
|
||||
</ul>
|
||||
<Button
|
||||
type="button"
|
||||
sm
|
||||
ghost
|
||||
blue
|
||||
icon="i-lucide-plus"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.ADD_PARAMETER')"
|
||||
@click="addParam"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TextArea
|
||||
v-if="state.http_method === 'POST'"
|
||||
v-model="state.request_template"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.REQUEST_TEMPLATE.LABEL')"
|
||||
:placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.REQUEST_TEMPLATE.PLACEHOLDER')"
|
||||
:rows="4"
|
||||
class="[&_textarea]:font-mono"
|
||||
/>
|
||||
|
||||
<TextArea
|
||||
v-model="state.response_template"
|
||||
:label="t('CAPTAIN.CUSTOM_TOOLS.FORM.RESPONSE_TEMPLATE.LABEL')"
|
||||
:placeholder="
|
||||
t('CAPTAIN.CUSTOM_TOOLS.FORM.RESPONSE_TEMPLATE.PLACEHOLDER')
|
||||
"
|
||||
:rows="4"
|
||||
class="[&_textarea]:font-mono"
|
||||
/>
|
||||
|
||||
<div class="flex gap-3 justify-between items-center w-full">
|
||||
<Button
|
||||
type="button"
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="t('CAPTAIN.FORM.CANCEL')"
|
||||
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
|
||||
@click="handleCancel"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
:label="
|
||||
t(mode === 'edit' ? 'CAPTAIN.FORM.EDIT' : 'CAPTAIN.FORM.CREATE')
|
||||
"
|
||||
class="w-full"
|
||||
:is-loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup>
|
||||
import { computed, defineModel, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
|
||||
import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
|
||||
|
||||
const emit = defineEmits(['remove']);
|
||||
const { t } = useI18n();
|
||||
const showErrors = ref(false);
|
||||
|
||||
const name = defineModel('name', {
|
||||
type: String,
|
||||
required: true,
|
||||
});
|
||||
|
||||
const type = defineModel('type', {
|
||||
type: String,
|
||||
required: true,
|
||||
});
|
||||
|
||||
const description = defineModel('description', {
|
||||
type: String,
|
||||
default: '',
|
||||
});
|
||||
|
||||
const required = defineModel('required', {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
});
|
||||
|
||||
const paramTypeOptions = computed(() => [
|
||||
{ value: 'string', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.STRING') },
|
||||
{ value: 'number', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.NUMBER') },
|
||||
{
|
||||
value: 'boolean',
|
||||
label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.BOOLEAN'),
|
||||
},
|
||||
{ value: 'array', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.ARRAY') },
|
||||
{ value: 'object', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.OBJECT') },
|
||||
]);
|
||||
|
||||
const validationError = computed(() => {
|
||||
if (!name.value || name.value.trim() === '') {
|
||||
return 'PARAM_NAME_REQUIRED';
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
watch([name, type, description, required], () => {
|
||||
showErrors.value = false;
|
||||
});
|
||||
|
||||
const validate = () => {
|
||||
showErrors.value = true;
|
||||
return !validationError.value;
|
||||
};
|
||||
|
||||
defineExpose({ validate });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="list-none">
|
||||
<div
|
||||
class="flex items-start gap-2 p-3 rounded-lg border border-n-weak bg-n-alpha-2"
|
||||
:class="{
|
||||
'animate-wiggle border-n-ruby-9': showErrors && validationError,
|
||||
}"
|
||||
>
|
||||
<div class="flex flex-col flex-1 gap-3">
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<Input
|
||||
v-model="name"
|
||||
:placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_NAME.PLACEHOLDER')"
|
||||
class="col-span-2"
|
||||
/>
|
||||
<ComboBox
|
||||
v-model="type"
|
||||
:options="paramTypeOptions"
|
||||
:placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPE.PLACEHOLDER')"
|
||||
class="[&>div>button]:bg-n-alpha-black2"
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
v-model="description"
|
||||
:placeholder="
|
||||
t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_DESCRIPTION.PLACEHOLDER')
|
||||
"
|
||||
/>
|
||||
<label class="flex items-center gap-2 cursor-pointer">
|
||||
<Checkbox v-model="required" />
|
||||
<span class="text-sm text-n-slate-11">
|
||||
{{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_REQUIRED.LABEL') }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<Button
|
||||
solid
|
||||
slate
|
||||
icon="i-lucide-trash"
|
||||
class="flex-shrink-0"
|
||||
@click.stop="emit('remove')"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
v-if="showErrors && validationError"
|
||||
class="block mt-1 text-sm text-n-ruby-11"
|
||||
>
|
||||
{{ t(`CAPTAIN.CUSTOM_TOOLS.FORM.ERRORS.${validationError}`) }}
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
|
||||
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import DocumentForm from './DocumentForm.vue';
|
||||
|
||||
defineProps({
|
||||
assistantId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
|
||||
const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
|
||||
|
||||
const handleSubmit = async newDocument => {
|
||||
try {
|
||||
await store.dispatch('captainDocuments/create', newDocument);
|
||||
useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
|
||||
dialogRef.value.close();
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
parseAPIErrorResponse(error) || t(`${i18nKey}.ERROR_MESSAGE`);
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
dialogRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({ dialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
:title="$t(`${i18nKey}.TITLE`)"
|
||||
:description="$t('CAPTAIN.DOCUMENTS.FORM_DESCRIPTION')"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<DocumentForm
|
||||
:assistant-id="assistantId"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
<template #footer />
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,235 @@
|
||||
<script setup>
|
||||
import { reactive, computed, ref, nextTick } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { minLength, requiredIf, url } from '@vuelidate/validators';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
|
||||
|
||||
const props = defineProps({
|
||||
assistantId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submit', 'cancel']);
|
||||
|
||||
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = {
|
||||
uiFlags: useMapGetter('captainDocuments/getUIFlags'),
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
name: '',
|
||||
url: '',
|
||||
documentType: 'url',
|
||||
pdfFile: null,
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
const fileInputRef = ref(null);
|
||||
|
||||
const validationRules = {
|
||||
url: {
|
||||
required: requiredIf(() => state.documentType === 'url'),
|
||||
url: requiredIf(() => state.documentType === 'url' && url),
|
||||
minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
|
||||
},
|
||||
pdfFile: {
|
||||
required: requiredIf(() => state.documentType === 'pdf'),
|
||||
},
|
||||
};
|
||||
|
||||
const documentTypeOptions = [
|
||||
{ value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
|
||||
{ value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
|
||||
];
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const isLoading = computed(() => formState.uiFlags.value.creatingItem);
|
||||
|
||||
const hasPdfFileError = computed(() => v$.value.pdfFile.$error);
|
||||
|
||||
const getErrorMessage = (field, errorKey) => {
|
||||
return v$.value[field].$error
|
||||
? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
|
||||
: '';
|
||||
};
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
url: getErrorMessage('url', 'URL'),
|
||||
pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
|
||||
}));
|
||||
|
||||
const handleCancel = () => emit('cancel');
|
||||
|
||||
const handleFileChange = event => {
|
||||
const file = event.target.files[0];
|
||||
if (file) {
|
||||
if (file.type !== 'application/pdf') {
|
||||
useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.INVALID_TYPE'));
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
if (file.size > MAX_FILE_SIZE) {
|
||||
// 10MB
|
||||
useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
state.pdfFile = file;
|
||||
state.name = file.name.replace(/\.pdf$/i, '');
|
||||
}
|
||||
};
|
||||
|
||||
const openFileDialog = () => {
|
||||
// Use nextTick to ensure the ref is available
|
||||
nextTick(() => {
|
||||
if (fileInputRef.value) {
|
||||
fileInputRef.value.click();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const prepareDocumentDetails = () => {
|
||||
const formData = new FormData();
|
||||
formData.append('document[assistant_id]', props.assistantId);
|
||||
|
||||
if (state.documentType === 'url') {
|
||||
formData.append('document[external_link]', state.url);
|
||||
formData.append('document[name]', state.name || state.url);
|
||||
} else {
|
||||
formData.append('document[pdf_file]', state.pdfFile);
|
||||
formData.append(
|
||||
'document[name]',
|
||||
state.name || state.pdfFile.name.replace('.pdf', '')
|
||||
);
|
||||
// No need to send external_link for PDF - it's auto-generated in the backend
|
||||
}
|
||||
|
||||
return formData;
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const isFormValid = await v$.value.$validate();
|
||||
if (!isFormValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('submit', prepareDocumentDetails());
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label
|
||||
for="documentType"
|
||||
class="mb-0.5 text-sm font-medium text-n-slate-12"
|
||||
>
|
||||
{{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
|
||||
</label>
|
||||
<ComboBox
|
||||
id="documentType"
|
||||
v-model="state.documentType"
|
||||
:options="documentTypeOptions"
|
||||
class="[&>div>button]:bg-n-alpha-black2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
v-if="state.documentType === 'url'"
|
||||
v-model="state.url"
|
||||
:label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
|
||||
:placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
|
||||
:message="formErrors.url"
|
||||
:message-type="formErrors.url ? 'error' : 'info'"
|
||||
/>
|
||||
|
||||
<div v-if="state.documentType === 'pdf'" class="flex flex-col gap-2">
|
||||
<label class="text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.LABEL') }}
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
accept=".pdf"
|
||||
class="hidden"
|
||||
@change="handleFileChange"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
:color="hasPdfFileError ? 'ruby' : 'slate'"
|
||||
:variant="hasPdfFileError ? 'outline' : 'solid'"
|
||||
class="!w-full !h-auto !justify-between !py-4"
|
||||
@click="openFileDialog"
|
||||
>
|
||||
<template #default>
|
||||
<div class="flex gap-2 items-center">
|
||||
<div
|
||||
class="flex justify-center items-center w-10 h-10 rounded-lg bg-n-slate-3"
|
||||
>
|
||||
<i class="text-xl i-ph-file-pdf text-n-slate-11" />
|
||||
</div>
|
||||
<div class="flex flex-col flex-1 gap-1 items-start">
|
||||
<p class="m-0 text-sm font-medium text-n-slate-12">
|
||||
{{
|
||||
state.pdfFile
|
||||
? state.pdfFile.name
|
||||
: t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
|
||||
}}
|
||||
</p>
|
||||
<p class="m-0 text-xs text-n-slate-11">
|
||||
{{
|
||||
state.pdfFile
|
||||
? `${(state.pdfFile.size / 1024 / 1024).toFixed(2)} MB`
|
||||
: t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.HELP_TEXT')
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i class="i-lucide-upload text-n-slate-11" />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
<p v-if="formErrors.pdfFile" class="text-xs text-n-ruby-9">
|
||||
{{ formErrors.pdfFile }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
v-model="state.name"
|
||||
:label="t('CAPTAIN.DOCUMENTS.FORM.NAME.LABEL')"
|
||||
:placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
|
||||
/>
|
||||
|
||||
<div class="flex gap-3 justify-between items-center w-full">
|
||||
<Button
|
||||
type="button"
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="t('CAPTAIN.FORM.CANCEL')"
|
||||
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
|
||||
@click="handleCancel"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
:label="t('CAPTAIN.FORM.CREATE')"
|
||||
class="w-full"
|
||||
:is-loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { onMounted, computed } from 'vue';
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { useCaptain } from 'dashboard/composables/useCaptain';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import Banner from 'dashboard/components-next/banner/Banner.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const { accountId } = useAccount();
|
||||
|
||||
const { documentLimits, fetchLimits } = useCaptain();
|
||||
|
||||
const openBilling = () => {
|
||||
router.push({
|
||||
name: 'billing_settings_index',
|
||||
params: { accountId: accountId.value },
|
||||
});
|
||||
};
|
||||
|
||||
const showBanner = computed(() => {
|
||||
if (!documentLimits.value) return false;
|
||||
|
||||
const { currentAvailable } = documentLimits.value;
|
||||
return currentAvailable === 0;
|
||||
});
|
||||
|
||||
onMounted(fetchLimits);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Banner
|
||||
v-show="showBanner"
|
||||
color="amber"
|
||||
:action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
|
||||
@action="openBilling"
|
||||
>
|
||||
{{ $t('CAPTAIN.BANNER.DOCUMENTS') }}
|
||||
</Banner>
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useStore, useMapGetter } from 'dashboard/composables/store';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import ResponseCard from '../../assistant/ResponseCard.vue';
|
||||
const props = defineProps({
|
||||
captainDocument: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['close']);
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const dialogRef = ref(null);
|
||||
|
||||
const uiFlags = useMapGetter('captainResponses/getUIFlags');
|
||||
const responses = useMapGetter('captainResponses/getRecords');
|
||||
const isFetching = computed(() => uiFlags.value.fetchingList);
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
store.dispatch('captainResponses/get', {
|
||||
assistantId: props.captainDocument.assistant.id,
|
||||
documentId: props.captainDocument.id,
|
||||
});
|
||||
});
|
||||
defineExpose({ dialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
type="edit"
|
||||
:title="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')"
|
||||
:description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
overflow-y-auto
|
||||
width="3xl"
|
||||
@close="handleClose"
|
||||
>
|
||||
<div
|
||||
v-if="isFetching"
|
||||
class="flex items-center justify-center py-10 text-n-slate-11"
|
||||
>
|
||||
<Spinner />
|
||||
</div>
|
||||
<div v-else class="flex flex-col gap-3 min-h-48">
|
||||
<ResponseCard
|
||||
v-for="response in responses"
|
||||
:id="response.id"
|
||||
:key="response.id"
|
||||
:question="response.question"
|
||||
:status="response.status"
|
||||
:answer="response.answer"
|
||||
:assistant="response.assistant"
|
||||
:created-at="response.created_at"
|
||||
:updated-at="response.updated_at"
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script setup>
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
|
||||
import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
|
||||
import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
const { isOnChatwootCloud } = useAccount();
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FeatureSpotlight
|
||||
:title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
|
||||
:note="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
|
||||
fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
|
||||
fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
|
||||
learn-more-url="https://chwt.app/captain-assistant"
|
||||
class="mb-8"
|
||||
:hide-actions="!isOnChatwootCloud"
|
||||
/>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<AssistantCard
|
||||
v-for="(assistant, index) in assistantsList.slice(0, 5)"
|
||||
:id="assistant.id"
|
||||
:key="`assistant-${index}`"
|
||||
:name="assistant.name"
|
||||
:description="assistant.description"
|
||||
:updated-at="assistant.created_at"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="min-h-[600px]" />
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.CUSTOM_TOOLS.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup>
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
|
||||
import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
|
||||
import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
const { isOnChatwootCloud } = useAccount();
|
||||
|
||||
const { replaceInstallationName } = useBranding();
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FeatureSpotlight
|
||||
:title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
|
||||
:note="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
|
||||
fallback-thumbnail="/assets/images/dashboard/captain/document-light.svg"
|
||||
fallback-thumbnail-dark="/assets/images/dashboard/captain/document-dark.svg"
|
||||
learn-more-url="https://chwt.app/captain-document"
|
||||
:hide-actions="!isOnChatwootCloud"
|
||||
class="mb-8"
|
||||
/>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<DocumentCard
|
||||
v-for="(document, index) in documentsList.slice(0, 5)"
|
||||
:id="document.id"
|
||||
:key="`document-${index}`"
|
||||
:name="replaceInstallationName(document.name)"
|
||||
:assistant="document.assistant"
|
||||
:external-link="document.external_link"
|
||||
:created-at="document.created_at"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.DOCUMENTS.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script setup>
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
|
||||
import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EmptyStateLayout
|
||||
:title="$t('CAPTAIN.INBOXES.EMPTY_STATE.TITLE')"
|
||||
:subtitle="$t('CAPTAIN.INBOXES.EMPTY_STATE.SUBTITLE')"
|
||||
:action-perms="['administrator']"
|
||||
>
|
||||
<template #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<InboxCard
|
||||
v-for="(inbox, index) in inboxes.slice(0, 5)"
|
||||
:id="inbox.id"
|
||||
:key="`inbox-${index}`"
|
||||
:inbox="inbox"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<Button
|
||||
:label="$t('CAPTAIN.INBOXES.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { useBranding } from 'shared/composables/useBranding';
|
||||
import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
|
||||
import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
|
||||
import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'approved',
|
||||
validator: value => ['approved', 'pending'].includes(value),
|
||||
},
|
||||
hasActiveFilters: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click', 'clearFilters']);
|
||||
|
||||
const isApproved = computed(() => props.variant === 'approved');
|
||||
const isPending = computed(() => props.variant === 'pending');
|
||||
|
||||
const { isOnChatwootCloud } = useAccount();
|
||||
const { replaceInstallationName } = useBranding();
|
||||
|
||||
const onClick = () => {
|
||||
emit('click');
|
||||
};
|
||||
|
||||
const onClearFilters = () => {
|
||||
emit('clearFilters');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FeatureSpotlight
|
||||
v-if="isApproved"
|
||||
:title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
|
||||
:note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
|
||||
fallback-thumbnail="/assets/images/dashboard/captain/faqs-light.svg"
|
||||
fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-dark.svg"
|
||||
learn-more-url="https://chwt.app/captain-faq"
|
||||
:hide-actions="!isOnChatwootCloud"
|
||||
class="mb-8"
|
||||
/>
|
||||
<EmptyStateLayout
|
||||
:title="
|
||||
isPending
|
||||
? $t('CAPTAIN.RESPONSES.EMPTY_STATE.NO_PENDING_TITLE')
|
||||
: $t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')
|
||||
"
|
||||
:subtitle="isApproved ? $t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE') : ''"
|
||||
:action-perms="['administrator']"
|
||||
:show-backdrop="isApproved"
|
||||
>
|
||||
<template v-if="isApproved" #empty-state-item>
|
||||
<div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
|
||||
<ResponseCard
|
||||
v-for="(response, index) in responsesList.slice(0, 5)"
|
||||
:id="response.id"
|
||||
:key="`response-${index}`"
|
||||
:question="replaceInstallationName(response.question)"
|
||||
:answer="replaceInstallationName(response.answer)"
|
||||
:status="response.status"
|
||||
:assistant="response.assistant"
|
||||
:created-at="response.created_at"
|
||||
:updated-at="response.created_at"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<Button
|
||||
v-if="isApproved"
|
||||
:label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
|
||||
icon="i-lucide-plus"
|
||||
@click="onClick"
|
||||
/>
|
||||
<Button
|
||||
v-else-if="isPending && hasActiveFilters"
|
||||
:label="$t('CAPTAIN.RESPONSES.EMPTY_STATE.CLEAR_SEARCH')"
|
||||
variant="link"
|
||||
size="sm"
|
||||
@click="onClearFilters"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</EmptyStateLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,286 @@
|
||||
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
||||
|
||||
export const assistantsList = [
|
||||
{
|
||||
account_id: 2,
|
||||
config: { product_name: 'HelpDesk Pro' },
|
||||
created_at: 1736033561,
|
||||
description:
|
||||
'An advanced AI assistant designed to enhance customer support solutions by automating workflows and providing instant responses.',
|
||||
id: 4,
|
||||
name: 'Support Genie',
|
||||
},
|
||||
{
|
||||
account_id: 3,
|
||||
config: { product_name: 'CRM Tools' },
|
||||
created_at: 1736033562,
|
||||
description:
|
||||
'Helps streamline customer relationship management by organizing contacts, automating follow-ups, and providing insights.',
|
||||
id: 5,
|
||||
name: 'CRM Assistant',
|
||||
},
|
||||
{
|
||||
account_id: 4,
|
||||
config: { product_name: 'SalesFlow' },
|
||||
created_at: 1736033563,
|
||||
description:
|
||||
'Optimizes your sales pipeline by tracking prospects, forecasting sales, and automating administrative tasks.',
|
||||
id: 6,
|
||||
name: 'SalesBot',
|
||||
},
|
||||
{
|
||||
account_id: 5,
|
||||
config: { product_name: 'TicketMaster AI' },
|
||||
created_at: 1736033564,
|
||||
description:
|
||||
'Automates ticket assignment, categorization, and customer query responses to enhance support efficiency.',
|
||||
id: 7,
|
||||
name: 'TicketBot',
|
||||
},
|
||||
{
|
||||
account_id: 6,
|
||||
config: { product_name: 'FinanceAssist' },
|
||||
created_at: 1736033565,
|
||||
description:
|
||||
'Provides financial analytics, reporting, and insights, helping teams make data-driven financial decisions.',
|
||||
id: 8,
|
||||
name: 'Finance Wizard',
|
||||
},
|
||||
{
|
||||
account_id: 8,
|
||||
config: { product_name: 'HR Assistant' },
|
||||
created_at: 1736033567,
|
||||
description:
|
||||
'Streamlines HR operations including employee management, payroll, and recruitment processes.',
|
||||
id: 10,
|
||||
name: 'HR Helper',
|
||||
},
|
||||
];
|
||||
|
||||
export const documentsList = [
|
||||
{
|
||||
account_id: 1,
|
||||
assistant: { id: 1, name: 'Helper Pro' },
|
||||
content:
|
||||
'Comprehensive guide on using conversation filters to manage chats effectively.',
|
||||
created_at: 1736143272,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688192-how-to-use-conversation-filters',
|
||||
id: 3059,
|
||||
name: 'How to use Conversation Filters? | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 2,
|
||||
assistant: { id: 2, name: 'Support Genie' },
|
||||
content:
|
||||
'Step-by-step guide for automating ticket assignments and improving support workflow in Chatwoot.',
|
||||
created_at: 1736143273,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688200-automating-ticket-assignments',
|
||||
id: 3060,
|
||||
name: 'Automating Ticket Assignments | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 3,
|
||||
assistant: { id: 3, name: 'CRM Assistant' },
|
||||
content:
|
||||
'A detailed guide on managing and organizing customer profiles for better relationship management.',
|
||||
created_at: 1736143274,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688210-managing-customer-profiles',
|
||||
id: 3061,
|
||||
name: 'Managing Customer Profiles | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 4,
|
||||
assistant: { id: 4, name: 'SalesBot' },
|
||||
content:
|
||||
'Learn how to optimize sales tracking and improve your sales forecasting using advanced features.',
|
||||
created_at: 1736143275,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688220-sales-tracking-guide',
|
||||
id: 3062,
|
||||
name: 'Sales Tracking Guide | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 5,
|
||||
assistant: { id: 5, name: 'TicketBot' },
|
||||
content:
|
||||
'How to efficiently create, manage, and resolve tickets in Chatwoot.',
|
||||
created_at: 1736143276,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688230-managing-tickets',
|
||||
id: 3063,
|
||||
name: 'Managing Tickets | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
{
|
||||
account_id: 6,
|
||||
assistant: { id: 6, name: 'Finance Wizard' },
|
||||
content:
|
||||
'Detailed guide on how to use financial reporting tools and generate insightful analytics.',
|
||||
created_at: 1736143277,
|
||||
external_link:
|
||||
'https://www.chatwoot.com/hc/user-guide/articles/1677688240-financial-reporting',
|
||||
id: 3064,
|
||||
name: 'Financial Reporting | User Guide | Chatwoot',
|
||||
status: 'available',
|
||||
},
|
||||
];
|
||||
|
||||
export const responsesList = [
|
||||
{
|
||||
account_id: 1,
|
||||
answer:
|
||||
'Messenger may be deactivated because you are on a free plan or the limit for inboxes might have been reached.',
|
||||
created_at: 1736283330,
|
||||
id: 87,
|
||||
question: 'Why is my Messenger in Chatwoot deactivated?',
|
||||
status: 'pending',
|
||||
assistant: {
|
||||
account_id: 1,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033280,
|
||||
description: 'Assists with general queries and system-wide issues.',
|
||||
id: 1,
|
||||
name: 'Assistant 2',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 2,
|
||||
answer:
|
||||
'You can integrate your WhatsApp account by navigating to the Integrations section and selecting the WhatsApp integration option.',
|
||||
created_at: 1736283340,
|
||||
id: 88,
|
||||
question: 'How do I integrate WhatsApp with Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 2,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033281,
|
||||
description: 'Helps with integration and setup-related inquiries.',
|
||||
id: 2,
|
||||
name: 'Assistant 3',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 3,
|
||||
answer:
|
||||
"To reset your password, go to the login page and click on 'Forgot Password', then follow the instructions sent to your email.",
|
||||
created_at: 1736283350,
|
||||
id: 89,
|
||||
question: 'How can I reset my password in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 3,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033282,
|
||||
description: 'Handles account management and recovery support.',
|
||||
id: 3,
|
||||
name: 'Assistant 4',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 4,
|
||||
answer:
|
||||
"You can enable the dark mode in settings by navigating to 'Appearance' and selecting 'Dark Mode'.",
|
||||
created_at: 1736283360,
|
||||
id: 90,
|
||||
question: 'How do I enable dark mode in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 4,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033283,
|
||||
description: 'Helps with UI and theme-related inquiries.',
|
||||
id: 4,
|
||||
name: 'Assistant 5',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 5,
|
||||
answer:
|
||||
"To add a new team member, navigate to 'Settings', then 'Team', and click on 'Add Team Member'.",
|
||||
created_at: 1736283370,
|
||||
id: 91,
|
||||
question: 'How do I add a new team member in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 5,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033284,
|
||||
description: 'Supports team management and user access-related queries.',
|
||||
id: 5,
|
||||
name: 'Assistant 6',
|
||||
},
|
||||
},
|
||||
{
|
||||
account_id: 6,
|
||||
answer:
|
||||
"Campaigns in Chatwoot allow you to send targeted messages to specific user segments. You can create them in the 'Campaigns' section.",
|
||||
created_at: 1736283380,
|
||||
id: 92,
|
||||
question: 'What are campaigns in Chatwoot?',
|
||||
assistant: {
|
||||
account_id: 6,
|
||||
config: { product_name: 'Chatwoot' },
|
||||
created_at: 1736033285,
|
||||
description:
|
||||
'Specialized in marketing, campaign management, and messaging strategies.',
|
||||
id: 6,
|
||||
name: 'Assistant 7',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const inboxes = [
|
||||
{
|
||||
id: 7,
|
||||
name: 'Email Support',
|
||||
channel_type: INBOX_TYPES.EMAIL,
|
||||
email: 'support@company.com',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'Website Chat',
|
||||
channel_type: INBOX_TYPES.WEB,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Facebook Support',
|
||||
channel_type: INBOX_TYPES.FB,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'SMS Service',
|
||||
channel_type: INBOX_TYPES.TWILIO,
|
||||
messaging_service_sid: 'MGxxxxxx',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: 'WhatsApp Support',
|
||||
channel_type: INBOX_TYPES.WHATSAPP,
|
||||
phone_number: '+1987654321',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: 'Telegram Support',
|
||||
channel_type: INBOX_TYPES.TELEGRAM,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: 'LINE Support',
|
||||
channel_type: INBOX_TYPES.LINE,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: 'API Channel',
|
||||
channel_type: INBOX_TYPES.API,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: 'SMS Basic',
|
||||
channel_type: INBOX_TYPES.SMS,
|
||||
phone_number: '+1555555555',
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import ConnectInboxForm from './ConnectInboxForm.vue';
|
||||
|
||||
defineProps({
|
||||
assistantId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['close']);
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
const connectForm = ref(null);
|
||||
|
||||
const i18nKey = 'CAPTAIN.INBOXES.CREATE';
|
||||
|
||||
const handleSubmit = async payload => {
|
||||
try {
|
||||
await store.dispatch('captainInboxes/create', payload);
|
||||
useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
|
||||
dialogRef.value.close();
|
||||
} catch (error) {
|
||||
const errorMessage = error?.message || t(`${i18nKey}.ERROR_MESSAGE`);
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
dialogRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({ dialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
type="create"
|
||||
:title="$t(`${i18nKey}.TITLE`)"
|
||||
:description="$t('CAPTAIN.INBOXES.FORM_DESCRIPTION')"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<ConnectInboxForm
|
||||
ref="connectForm"
|
||||
:assistant-id="assistantId"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
<template #footer />
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required } from '@vuelidate/validators';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
|
||||
|
||||
const props = defineProps({
|
||||
assistantId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submit', 'cancel']);
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = {
|
||||
uiFlags: useMapGetter('captainInboxes/getUIFlags'),
|
||||
inboxes: useMapGetter('inboxes/getInboxes'),
|
||||
captainInboxes: useMapGetter('captainInboxes/getRecords'),
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
inboxId: null,
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
|
||||
const validationRules = {
|
||||
inboxId: { required },
|
||||
};
|
||||
|
||||
const inboxList = computed(() => {
|
||||
const captainInboxIds = formState.captainInboxes.value.map(inbox => inbox.id);
|
||||
|
||||
return formState.inboxes.value
|
||||
.filter(inbox => !captainInboxIds.includes(inbox.id))
|
||||
.map(inbox => ({
|
||||
value: inbox.id,
|
||||
label: inbox.name,
|
||||
}));
|
||||
});
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const isLoading = computed(() => formState.uiFlags.value.creatingItem);
|
||||
|
||||
const getErrorMessage = (field, errorKey) => {
|
||||
return v$.value[field].$error
|
||||
? t(`CAPTAIN.INBOXES.FORM.${errorKey}.ERROR`)
|
||||
: '';
|
||||
};
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
inboxId: getErrorMessage('inboxId', 'INBOX'),
|
||||
}));
|
||||
|
||||
const handleCancel = () => emit('cancel');
|
||||
|
||||
const prepareInboxPayload = () => ({
|
||||
inboxId: state.inboxId,
|
||||
assistantId: props.assistantId,
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const isFormValid = await v$.value.$validate();
|
||||
if (!isFormValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('submit', prepareInboxPayload());
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
|
||||
{{ t('CAPTAIN.INBOXES.FORM.INBOX.LABEL') }}
|
||||
</label>
|
||||
<ComboBox
|
||||
id="inbox"
|
||||
v-model="state.inboxId"
|
||||
:options="inboxList"
|
||||
:has-error="!!formErrors.inboxId"
|
||||
:placeholder="t('CAPTAIN.INBOXES.FORM.INBOX.PLACEHOLDER')"
|
||||
class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
|
||||
:message="formErrors.inboxId"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between w-full gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="t('CAPTAIN.FORM.CANCEL')"
|
||||
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
|
||||
@click="handleCancel"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
:label="t('CAPTAIN.FORM.CREATE')"
|
||||
class="w-full"
|
||||
:is-loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useStore } from 'dashboard/composables/store';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
|
||||
import ResponseForm from './ResponseForm.vue';
|
||||
|
||||
const props = defineProps({
|
||||
selectedResponse: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'create',
|
||||
validator: value => ['create', 'edit'].includes(value),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['close']);
|
||||
const { t } = useI18n();
|
||||
const store = useStore();
|
||||
const route = useRoute();
|
||||
|
||||
const dialogRef = ref(null);
|
||||
const responseForm = ref(null);
|
||||
|
||||
const updateResponse = responseDetails =>
|
||||
store.dispatch('captainResponses/update', {
|
||||
id: props.selectedResponse.id,
|
||||
...responseDetails,
|
||||
});
|
||||
|
||||
const i18nKey = computed(() => `CAPTAIN.RESPONSES.${props.type.toUpperCase()}`);
|
||||
|
||||
const createResponse = responseDetails =>
|
||||
store.dispatch('captainResponses/create', responseDetails);
|
||||
|
||||
const handleSubmit = async updatedResponse => {
|
||||
try {
|
||||
if (props.type === 'edit') {
|
||||
await updateResponse({
|
||||
...updatedResponse,
|
||||
assistant_id: route.params.assistantId,
|
||||
});
|
||||
} else {
|
||||
await createResponse({
|
||||
...updatedResponse,
|
||||
assistant_id: route.params.assistantId,
|
||||
});
|
||||
}
|
||||
useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
|
||||
dialogRef.value.close();
|
||||
} catch (error) {
|
||||
const errorMessage =
|
||||
error?.response?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
|
||||
useAlert(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
dialogRef.value.close();
|
||||
};
|
||||
|
||||
defineExpose({ dialogRef });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog
|
||||
ref="dialogRef"
|
||||
:title="$t(`${i18nKey}.TITLE`)"
|
||||
:description="$t('CAPTAIN.RESPONSES.FORM_DESCRIPTION')"
|
||||
:show-cancel-button="false"
|
||||
:show-confirm-button="false"
|
||||
@close="handleClose"
|
||||
>
|
||||
<ResponseForm
|
||||
ref="responseForm"
|
||||
:mode="type"
|
||||
:response="selectedResponse"
|
||||
@submit="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
/>
|
||||
<template #footer />
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import { onMounted, computed } from 'vue';
|
||||
import { useAccount } from 'dashboard/composables/useAccount';
|
||||
import { useCaptain } from 'dashboard/composables/useCaptain';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import Banner from 'dashboard/components-next/banner/Banner.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const { accountId } = useAccount();
|
||||
|
||||
const { responseLimits, fetchLimits } = useCaptain();
|
||||
|
||||
const openBilling = () => {
|
||||
router.push({
|
||||
name: 'billing_settings_index',
|
||||
params: { accountId: accountId.value },
|
||||
});
|
||||
};
|
||||
|
||||
const showBanner = computed(() => {
|
||||
if (!responseLimits.value) return false;
|
||||
|
||||
const { consumed, totalCount } = responseLimits.value;
|
||||
if (!consumed || !totalCount) return false;
|
||||
|
||||
return consumed / totalCount > 0.8;
|
||||
});
|
||||
|
||||
onMounted(fetchLimits);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Banner
|
||||
v-show="showBanner"
|
||||
color="amber"
|
||||
:action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
|
||||
@action="openBilling"
|
||||
>
|
||||
{{ $t('CAPTAIN.BANNER.RESPONSES') }}
|
||||
</Banner>
|
||||
</template>
|
||||
@@ -0,0 +1,131 @@
|
||||
<script setup>
|
||||
import { reactive, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
import { useMapGetter } from 'dashboard/composables/store';
|
||||
|
||||
import Input from 'dashboard/components-next/input/Input.vue';
|
||||
import Editor from 'dashboard/components-next/Editor/Editor.vue';
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: value => ['edit', 'create'].includes(value),
|
||||
},
|
||||
response: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['submit', 'cancel']);
|
||||
const { t } = useI18n();
|
||||
|
||||
const formState = {
|
||||
uiFlags: useMapGetter('captainResponses/getUIFlags'),
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
question: '',
|
||||
answer: '',
|
||||
};
|
||||
|
||||
const state = reactive({ ...initialState });
|
||||
|
||||
const validationRules = {
|
||||
question: { required, minLength: minLength(1) },
|
||||
answer: { required, minLength: minLength(1) },
|
||||
};
|
||||
|
||||
const v$ = useVuelidate(validationRules, state);
|
||||
|
||||
const isLoading = computed(() => formState.uiFlags.value.creatingItem);
|
||||
|
||||
const getErrorMessage = (field, errorKey) => {
|
||||
return v$.value[field].$error
|
||||
? t(`CAPTAIN.RESPONSES.FORM.${errorKey}.ERROR`)
|
||||
: '';
|
||||
};
|
||||
|
||||
const formErrors = computed(() => ({
|
||||
question: getErrorMessage('question', 'QUESTION'),
|
||||
answer: getErrorMessage('answer', 'ANSWER'),
|
||||
}));
|
||||
|
||||
const handleCancel = () => emit('cancel');
|
||||
|
||||
const prepareDocumentDetails = () => ({
|
||||
question: state.question,
|
||||
answer: state.answer,
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const isFormValid = await v$.value.$validate();
|
||||
if (!isFormValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
emit('submit', prepareDocumentDetails());
|
||||
};
|
||||
|
||||
const updateStateFromResponse = response => {
|
||||
if (!response) return;
|
||||
|
||||
const { question, answer } = response;
|
||||
|
||||
Object.assign(state, {
|
||||
question,
|
||||
answer,
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.response,
|
||||
newResponse => {
|
||||
if (props.mode === 'edit' && newResponse) {
|
||||
updateStateFromResponse(newResponse);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
|
||||
<Input
|
||||
v-model="state.question"
|
||||
:label="t('CAPTAIN.RESPONSES.FORM.QUESTION.LABEL')"
|
||||
:placeholder="t('CAPTAIN.RESPONSES.FORM.QUESTION.PLACEHOLDER')"
|
||||
:message="formErrors.question"
|
||||
:message-type="formErrors.question ? 'error' : 'info'"
|
||||
/>
|
||||
<Editor
|
||||
v-model="state.answer"
|
||||
:label="t('CAPTAIN.RESPONSES.FORM.ANSWER.LABEL')"
|
||||
:placeholder="t('CAPTAIN.RESPONSES.FORM.ANSWER.PLACEHOLDER')"
|
||||
:message="formErrors.answer"
|
||||
:max-length="10000"
|
||||
:message-type="formErrors.answer ? 'error' : 'info'"
|
||||
/>
|
||||
<div class="flex items-center justify-between w-full gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="faded"
|
||||
color="slate"
|
||||
:label="t('CAPTAIN.FORM.CANCEL')"
|
||||
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
|
||||
@click="handleCancel"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
:label="t(`CAPTAIN.FORM.${mode.toUpperCase()}`)"
|
||||
class="w-full"
|
||||
:is-loading="isLoading"
|
||||
:disabled="isLoading"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import SettingsHeader from './SettingsHeader.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Story
|
||||
title="Captain/PageComponents/SettingsHeader"
|
||||
:layout="{ type: 'grid', width: '800px' }"
|
||||
>
|
||||
<Variant title="Default">
|
||||
<div class="px-6 py-4 bg-n-background">
|
||||
<SettingsHeader
|
||||
heading="General Settings"
|
||||
description="Configure general preferences for your workspace."
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
|
||||
<Variant title="Long Description">
|
||||
<div class="px-6 py-4 bg-n-background">
|
||||
<SettingsHeader
|
||||
heading="Integrations"
|
||||
description="Manage and configure third-party integrations such as Slack, Zapier, and Webhooks to enhance your workflow."
|
||||
/>
|
||||
</div>
|
||||
</Variant>
|
||||
</Story>
|
||||
</template>
|
||||
@@ -0,0 +1,19 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
heading: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="flex flex-col items-start gap-2">
|
||||
<h2 class="text-n-slate-12 text-base font-medium">{{ heading }}</h2>
|
||||
<p class="text-n-slate-11 text-sm">{{ description }}</p>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,148 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useMapGetter, useStore } from 'dashboard/composables/store.js';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
||||
|
||||
const emit = defineEmits(['close', 'createAssistant']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
|
||||
const assistants = useMapGetter('captainAssistants/getRecords');
|
||||
|
||||
const currentAssistantId = computed(() => route.params.assistantId);
|
||||
|
||||
const isAssistantActive = assistant => {
|
||||
return assistant.id === Number(currentAssistantId.value);
|
||||
};
|
||||
|
||||
const fetchDataForRoute = async (routeName, assistantId) => {
|
||||
const dataFetchMap = {
|
||||
captain_assistants_responses_index: async () => {
|
||||
await store.dispatch('captainResponses/get', { assistantId });
|
||||
await store.dispatch('captainResponses/fetchPendingCount', assistantId);
|
||||
},
|
||||
captain_assistants_responses_pending: async () => {
|
||||
await store.dispatch('captainResponses/get', {
|
||||
assistantId,
|
||||
status: 'pending',
|
||||
});
|
||||
},
|
||||
captain_assistants_documents_index: async () => {
|
||||
await store.dispatch('captainDocuments/get', { assistantId });
|
||||
},
|
||||
captain_assistants_scenarios_index: async () => {
|
||||
await store.dispatch('captainScenarios/get', { assistantId });
|
||||
},
|
||||
captain_assistants_playground_index: () => {
|
||||
// Playground doesn't need pre-fetching, it loads on interaction
|
||||
},
|
||||
captain_assistants_inboxes_index: async () => {
|
||||
await store.dispatch('captainInboxes/get', { assistantId });
|
||||
},
|
||||
captain_tools_index: async () => {
|
||||
await store.dispatch('captainCustomTools/get', { page: 1 });
|
||||
},
|
||||
captain_assistants_settings_index: async () => {
|
||||
await store.dispatch('captainAssistants/show', assistantId);
|
||||
},
|
||||
};
|
||||
|
||||
const fetchFn = dataFetchMap[routeName];
|
||||
if (fetchFn) {
|
||||
await fetchFn();
|
||||
}
|
||||
};
|
||||
|
||||
const handleAssistantChange = async assistant => {
|
||||
if (isAssistantActive(assistant)) return;
|
||||
|
||||
const currentRouteName = route.name;
|
||||
const targetRouteName =
|
||||
currentRouteName || 'captain_assistants_responses_index';
|
||||
|
||||
await fetchDataForRoute(targetRouteName, assistant.id);
|
||||
|
||||
await router.push({
|
||||
name: targetRouteName,
|
||||
params: {
|
||||
accountId: route.params.accountId,
|
||||
assistantId: assistant.id,
|
||||
},
|
||||
});
|
||||
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const openCreateAssistantDialog = () => {
|
||||
emit('createAssistant');
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<h2
|
||||
class="text-base font-medium cursor-pointer text-n-slate-12 w-fit hover:underline"
|
||||
>
|
||||
{{ t('CAPTAIN.ASSISTANT_SWITCHER.ASSISTANTS') }}
|
||||
</h2>
|
||||
</div>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ t('CAPTAIN.ASSISTANT_SWITCHER.SWITCH_ASSISTANT') }}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
:label="t('CAPTAIN.ASSISTANT_SWITCHER.NEW_ASSISTANT')"
|
||||
color="slate"
|
||||
icon="i-lucide-plus"
|
||||
size="sm"
|
||||
class="!bg-n-alpha-2 hover:!bg-n-alpha-3"
|
||||
@click="openCreateAssistantDialog"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="assistants.length > 0" class="flex flex-col gap-2 px-4">
|
||||
<Button
|
||||
v-for="assistant in assistants"
|
||||
:key="assistant.id"
|
||||
:label="assistant.name"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
trailing-icon
|
||||
:icon="isAssistantActive(assistant) ? 'i-lucide-check' : ''"
|
||||
class="!justify-end !px-2 !py-2 hover:!bg-n-alpha-2 [&>.i-lucide-check]:text-n-teal-10 h-9"
|
||||
size="sm"
|
||||
@click="handleAssistantChange(assistant)"
|
||||
>
|
||||
<span class="text-sm font-medium truncate text-n-slate-12">
|
||||
{{ assistant.name || '' }}
|
||||
</span>
|
||||
<Avatar
|
||||
v-if="assistant"
|
||||
:name="assistant.name"
|
||||
:size="20"
|
||||
icon-name="i-lucide-bot"
|
||||
rounded-full
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
<div v-else class="flex flex-col items-center gap-2 px-4 py-3">
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ t('CAPTAIN.ASSISTANT_SWITCHER.EMPTY_LIST') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user