contactstudiocstools 1.0.224

package/dist/runtime/components/Atom.SelectTreeField.vue

@@ -0,0 +1,49 @@
+<template>
+  <label class="input max-h-none flex cursor-pointer justify-between">
+    <span
+      v-if="nodesIsEmpty"
+      class="pl-2"
+    >Selecione</span>
+
+    <div class="flex flex-wrap">
+      <span
+        v-for="(node, i) in nodes"
+        :key="i"
+        class="badge badge-soft-secondary mx-1 my-1 leading-3"
+        @click="del(node)"
+      >
+        <span v-text="node.label" />
+        <i class="bi-x-circle-fill text-red-500 ml-2" />
+      </span>
+    </div>
+
+    <i class="bi-chevron-down ml-4" />
+  </label>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { INodes, INode } from "./types";
+
+// props
+interface IProps {
+  nodes: INodes;
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "delete", node: INode): void;
+}
+const emit = defineEmits<IEmits>();
+
+// computed
+const nodesIsEmpty = computed<boolean>(() => !props.nodes.length);
+
+// methods
+function del(node: INode): void {
+  emit("delete", node);
+}
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.Snapshot.vue

@@ -0,0 +1,33 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { logout } from "./types";
+import { useNuxtApp, useRuntimeConfig } from "#app";
+
+// data
+const { $emit } = useNuxtApp();
+const { BASE_URL } = useRuntimeConfig().public;
+
+// methods
+function initSnapshot(): void {
+  const snapshot = new Worker(`${BASE_URL}/snapshot.js`);
+  snapshot.postMessage("");
+  snapshot.onmessage = ({ data }) => {
+    if (data.error) {
+      logout();
+      return;
+    }
+
+    $emit("snapshot:update", data.data);
+  };
+}
+
+onMounted(() => {
+  initSnapshot();
+});
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Atom.Tabs.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <ul class="tabs sticky top-0 bg-white dark:bg-slate-900 z-10">
+      <template v-for="(show, tab) in tabs">
+        <li
+          v-if="show"
+          :key="tab"
+          :class="{ active: tab === tabActive }"
+          class="tab"
+          @click="change(tab)"
+        >
+          <slot :name="`h${tab}`" />
+        </li>
+      </template>
+    </ul>
+
+    <article>
+      <template v-for="(show, tab) in tabs">
+        <div
+          v-if="show"
+          v-show="tab === tabActive"
+          :key="tab"
+        >
+          <slot :name="tab" />
+        </div>
+      </template>
+    </article>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+// props
+interface IProps {
+  tabs: { [index: string]: boolean };
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "change", tab: string): void;
+}
+const emit = defineEmits<IEmits>();
+
+// data
+const tabActive = ref<string>(Object.keys(props.tabs)[0]);
+
+// methods
+function change(tab: string | number): void {
+  if (typeof tab === "number") return
+  tabActive.value = tab;
+  emit("change", tab);
+}
+
+// expose
+defineExpose({ change });
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Molecule.ChatMessageFile.vue

@@ -0,0 +1,102 @@
+<template>
+  <div
+    :class="getTypeClass"
+    class="text-xs p-2 m-2"
+  >
+    <audio
+      v-if="isAudioFile"
+      controls
+      autobuffer
+      class="h-8 max-w-full"
+    >
+      <source
+        :src="message.primitive.content.message.url"
+        type="audio/ogg"
+      >
+    </audio>
+    <MoleculeFile
+      v-else
+      :file="attachment.file"
+      :status="attachment.status"
+      class="w-full"
+    />
+    <AtomChatMessageFooter
+      :message="message"
+      class="mt-2"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed, reactive } from "vue";
+import { IChatMessage, EFieldStatus, logger } from "./types";
+
+// props
+interface IProps {
+  message: IChatMessage;
+}
+const props = defineProps<IProps>();
+
+// mounted
+onMounted(async () => {
+  try {
+    await getFileData();
+  } catch (e) {
+    logger.error("AtomChatMessageFile:GetFileData", { e });
+  }
+});
+
+// computed
+const getTypeClass = computed<string>(() => {
+  if (props.message.primary)
+    return "primary badge badge-soft-secondary ml-14 float-right";
+  return "badge badge-outline-secondary mr-14 float-left bg-white dark:bg-slate-900";
+});
+const isAudioFile = computed<boolean>(
+  () => !!props.message.primitive.content.message.content_type.match(/audio/)
+);
+
+// data
+const attachment = reactive<any>({
+  ID: props.message.primitive.message_id,
+  file: new File([], ""),
+  status: EFieldStatus.loading,
+});
+
+// methods
+async function getFileData(): Promise<void> {
+  const url = props.message.primitive.content.message.url;
+  const caption = props.message.primitive.content.message.caption;
+  const type = props.message.primitive.content.message.content_type;
+  const res = await fetch(url);
+  const blob = await res.blob();
+  attachment.file = new File([blob], caption, { type });
+  attachment.status = EFieldStatus.none;
+}
+</script>
+
+<style scoped>
+audio::-webkit-media-controls-play-button,
+audio::-webkit-media-controls-panel {
+  background-color: white;
+}
+
+.primary audio::-webkit-media-controls-play-button,
+.primary audio::-webkit-media-controls-panel {
+  background-color: #f1f5f9;
+}
+
+.dark audio {
+  color-scheme: dark;
+}
+
+.dark audio::-webkit-media-controls-play-button,
+.dark audio::-webkit-media-controls-panel {
+  background-color: #0f172a;
+}
+
+.dark .primary audio::-webkit-media-controls-play-button,
+.dark .primary audio::-webkit-media-controls-panel {
+  background-color: #1e293b;
+}
+</style>

package/dist/runtime/components/Molecule.ChatMessageOption.vue

@@ -0,0 +1,85 @@
+<template>
+  <div
+    :class="getPositionClass"
+    class="text-xs"
+  >
+    <!-- message -->
+    <article
+      :class="getBadgeClass"
+      class="p-2 m-2 mb-1"
+    >
+      <div
+        class="markdown whitespace-pre-wrap"
+        v-html="marked(message.primitive.content.message.caption || '')"
+      />
+      <AtomChatMessageFooter
+        :message="message"
+        class="-mt-2"
+      />
+    </article>
+
+    <!-- options -->
+    <aside
+      :disabled="selected"
+      class="flex flex-wrap gap-1 mx-2"
+    >
+      <button
+        v-for="(option, i) in getOptions"
+        :key="i"
+        :class="getButtonClass"
+        class="text-center flex-auto p-2"
+        @click="select(option)"
+        v-text="option.label"
+      />
+    </aside>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { marked } from "marked";
+import { computed, ref } from "vue";
+import { IChatMessage, IFieldSelectOption, IFieldSelectOptions } from "./types";
+
+// props
+interface IProps {
+  message: IChatMessage;
+}
+const props = defineProps<IProps>();
+
+// emits
+interface IEmits {
+  (e: "select", option: IFieldSelectOption): void;
+}
+const emit = defineEmits<IEmits>();
+
+// computed
+const getPositionClass = computed<string>(() => {
+  if (props.message.primary) return "float-right ml-14";
+  return "float-left mr-14";
+});
+const getBadgeClass = computed<string>(() => {
+  if (props.message.primary) return "badge badge-soft-secondary";
+  return "badge badge-outline-secondary bg-white dark:bg-slate-900";
+});
+const getButtonClass = computed<string>(() => {
+  if (props.message.primary) return "btn btn-soft-primary";
+  return "btn btn-outline-primary bg-white dark:bg-slate-900";
+});
+const getOptions = computed<IFieldSelectOptions>(() => {
+  const options = props.message.primitive.content.message.options;
+  return options.map(({ text, value }: any) => ({
+    label: text,
+    value,
+  }));
+});
+
+// data
+const selected = ref<boolean>(!!props.message.selected);
+
+function select(option: IFieldSelectOption): void {
+  selected.value = true;
+  emit("select", option);
+}
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Molecule.ChatMessageText.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    :class="getTypeClass"
+    class="text-xs p-2 m-2"
+  >
+    <div
+      class="markdown whitespace-pre-wrap"
+      v-html="marked(message.primitive.content.message.text || '')"
+    />
+    <AtomChatMessageFooter
+      :message="message"
+      class="-mt-2"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { marked } from "marked";
+import { IChatMessage } from "./types";
+
+// props
+interface IProps {
+  message: IChatMessage;
+}
+const props = defineProps<IProps>();
+
+// computed
+const getTypeClass = computed<string>(() => {
+  if (props.message.primary)
+    return "badge badge-soft-secondary ml-14 float-right";
+  return "badge badge-outline-secondary mr-14 float-left bg-white dark:bg-slate-900";
+});
+</script>
+
+<style scoped></style>

package/dist/runtime/components/Molecule.ClientHistory.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    v-if="!histories.length"
+    class="w-full text-center mt-4"
+  >
+    Nenhuma ocorrência encontrada
+  </div>
+  <section
+    v-else
+    class="p-4"
+  >
+    <template
+      v-for="(tab, i) in tabs"
+      :key="i"
+    >
+      <span
+        v-show="tab === tabActive"
+        class="badge badge-outline-secondary bg-slate-100 dark:bg-slate-800 float-right cursor-pointer text-xs py-1.5 !rounded-tl-none !rounded-bl-none"
+        @click="change(tab)"
+      >
+        <i class="bi bi-arrow-left-right" />
+      </span>
+
+      <span
+        v-show="tab === tabActive"
+        class="badge badge-outline-secondary float-right cursor-pointer text-xs py-1.5 !border-r-0 dark:!border-r-0 !rounded-tr-none !rounded-br-none"
+        @click="change(tab)"
+      >
+        <slot :name="`h${tab}`" />
+      </span>
+
+      <article v-show="tab === tabActive">
+        <slot :name="tab" />
+      </article>
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { IClientHistories } from "./types";
+
+// props
+interface IProps {
+  histories: IClientHistories;
+  tabs: string[];
+}
+const props = defineProps<IProps>();
+
+// data
+const tabActive = ref<string>(props.tabs[0]);
+
+// methods
+function change(tab: string): void {
+  const index = props.tabs.indexOf(tab);
+  const limit = props.tabs.length - 1;
+
+  tabActive.value = props.tabs[index < limit ? index + 1 : 0];
+}
+</script>
+
+<style scoped></style>