@meistrari/chat-nuxt 1.0.0

package/dist/runtime/embed/components/ChatEmbedInner.vue

@@ -0,0 +1,604 @@
+<script setup>
+import { exportConversationToMarkdown } from "../../utils/export-conversation";
+import {
+  normalizeConversationId,
+  resolveChatFeatures,
+  resolveConversationCreator
+} from "../../utils/tela-chat";
+const props = defineProps({
+  conversationId: { type: [String, null], required: false },
+  initialConversationId: { type: [String, null], required: false, default: null },
+  hideSidebar: { type: Boolean, required: false, default: true },
+  user: { type: [Object, null], required: false },
+  features: { type: Object, required: false }
+});
+const emit = defineEmits(["update:conversationId"]);
+const chatApi = useChatApi();
+const embedConfig = useEmbedConfig();
+const { user: authUser } = useTelaApplicationAuth();
+const { getMember } = useWorkspaceMembers();
+const statusToast = useStatusToast();
+const { conversations, fetchConversations, createConversation, deleteConversation, renameConversation, duplicateConversation } = useConversations();
+const { settings: workspaceSettingsState, fetchSettings } = useWorkspaceSettings();
+const effectiveWorkspaceSettings = computed(() => embedConfig?.workspaceSettings.value ?? workspaceSettingsState.value);
+const { closePanel: closeFilesPanel } = useConversationFilesPanel();
+const activeConversationId = ref(
+  normalizeConversationId(props.conversationId) ?? normalizeConversationId(props.initialConversationId)
+);
+const loadingConversationId = ref(null);
+const isReady = ref(false);
+const resolvedFeatures = computed(() => resolveChatFeatures(props.features));
+const dropZoneRef = ref(null);
+const activeTab = ref("chat");
+const messageInputRef = ref(null);
+const { isDragging, setupDropZone } = useFileDrop({
+  onDrop: (files) => {
+    messageInputRef.value?.addFiles(files);
+  }
+});
+setupDropZone(dropZoneRef);
+const {
+  currentConversation,
+  messages,
+  loading,
+  generatingTitle,
+  animatedTitle,
+  hasPendingMessage,
+  loadConversation,
+  sendMessage,
+  retryMessage,
+  cancelConversation,
+  startPolling,
+  clearConversation
+} = useChat();
+const conversationModelTarget = computed(() => {
+  if (!currentConversation.value)
+    return null;
+  return {
+    id: currentConversation.value.id,
+    model: currentConversation.value.model
+  };
+});
+const selectedModel = useSelectedModel(conversationModelTarget);
+const conversationIdRef = computed(() => currentConversation.value?.id ?? null);
+const { total, files: conversationFiles } = useConversationFiles(conversationIdRef);
+const filesCount = computed(() => total.value);
+const hasMessages = computed(() => messages.value.length > 0);
+const visibleConversations = computed(
+  () => conversations.value.filter((c) => c.title || c.id === activeConversationId.value)
+);
+function syncConversationId(nextConversationId) {
+  activeConversationId.value = normalizeConversationId(nextConversationId);
+}
+function updateConversationId(nextConversationId) {
+  const normalizedConversationId = normalizeConversationId(nextConversationId);
+  const didChange = activeConversationId.value !== normalizedConversationId;
+  activeConversationId.value = normalizedConversationId;
+  if (didChange) {
+    emit("update:conversationId", normalizedConversationId);
+  }
+}
+async function ensureConversationLoaded(conversationId) {
+  if (currentConversation.value?.id === conversationId) {
+    startPolling();
+    return;
+  }
+  if (loadingConversationId.value === conversationId) {
+    return;
+  }
+  loadingConversationId.value = conversationId;
+  try {
+    await loadConversation(conversationId);
+    if (currentConversation.value?.id !== conversationId) {
+      statusToast.update({ text: "Erro ao carregar conversa", icon: "i-ph-warning" });
+      return;
+    }
+    startPolling();
+  } finally {
+    if (loadingConversationId.value === conversationId) {
+      loadingConversationId.value = null;
+    }
+  }
+}
+function resetConversation(shouldEmit = true) {
+  clearConversation();
+  activeTab.value = "chat";
+  closeFilesPanel();
+  if (shouldEmit) {
+    updateConversationId(null);
+  } else {
+    syncConversationId(null);
+  }
+}
+async function openConversation(nextConversationId) {
+  const normalizedConversationId = normalizeConversationId(nextConversationId);
+  if (!normalizedConversationId) {
+    return;
+  }
+  updateConversationId(normalizedConversationId);
+  await ensureConversationLoaded(normalizedConversationId);
+}
+watch(() => props.conversationId, async (nextConversationId) => {
+  if (nextConversationId === void 0) {
+    return;
+  }
+  const normalizedConversationId = normalizeConversationId(nextConversationId);
+  if (!isReady.value) {
+    syncConversationId(normalizedConversationId);
+    return;
+  }
+  if (normalizedConversationId === activeConversationId.value && currentConversation.value?.id === normalizedConversationId) {
+    return;
+  }
+  if (!normalizedConversationId) {
+    resetConversation(false);
+    return;
+  }
+  syncConversationId(normalizedConversationId);
+  await ensureConversationLoaded(normalizedConversationId);
+});
+onMounted(async () => {
+  const pendingTasks = [fetchConversations()];
+  if (!effectiveWorkspaceSettings.value) {
+    pendingTasks.push(fetchSettings());
+  }
+  await Promise.allSettled(pendingTasks);
+  isReady.value = true;
+  if (activeConversationId.value) {
+    await ensureConversationLoaded(activeConversationId.value);
+  }
+});
+const MAX_DISMISSED_CHAT_IDS = 100;
+const dismissedChats = ref(/* @__PURE__ */ new Set());
+const dismissedStorageKey = computed(
+  () => `embed-dismissed-outdated-settings:${embedConfig?.workspaceId.value.trim() || "default"}`
+);
+onMounted(() => {
+  try {
+    const stored = localStorage.getItem(dismissedStorageKey.value);
+    if (stored)
+      dismissedChats.value = new Set(JSON.parse(stored));
+  } catch {
+  }
+});
+const isSettingsOutdated = computed(() => {
+  if (!effectiveWorkspaceSettings.value || !currentConversation.value)
+    return false;
+  if (!currentConversation.value.appliedSettingsSnapshot)
+    return false;
+  const rawAppliedAt = currentConversation.value.appliedSettingsSnapshot.updatedAt ?? currentConversation.value.appliedSettingsAt;
+  if (!rawAppliedAt)
+    return false;
+  const appliedAt = new Date(rawAppliedAt).getTime();
+  const updatedAt = new Date(effectiveWorkspaceSettings.value.updatedAt).getTime();
+  return appliedAt < updatedAt;
+});
+const isBannerDismissed = computed(
+  () => currentConversation.value ? dismissedChats.value.has(currentConversation.value.id) : false
+);
+const showOutdatedBanner = computed(() => isSettingsOutdated.value && !isBannerDismissed.value);
+const showOutdatedBadge = computed(() => isSettingsOutdated.value && isBannerDismissed.value);
+function dismissOutdatedBanner() {
+  if (!currentConversation.value)
+    return;
+  dismissedChats.value.delete(currentConversation.value.id);
+  dismissedChats.value.add(currentConversation.value.id);
+  const nextDismissedChats = [...dismissedChats.value];
+  dismissedChats.value = new Set(nextDismissedChats.slice(-MAX_DISMISSED_CHAT_IDS));
+  try {
+    localStorage.setItem(dismissedStorageKey.value, JSON.stringify([...dismissedChats.value]));
+  } catch {
+  }
+}
+const optimisticTitle = ref(null);
+const displayTitle = computed(() => {
+  if (optimisticTitle.value !== null)
+    return optimisticTitle.value;
+  if (animatedTitle.value !== null)
+    return animatedTitle.value;
+  return currentConversation.value?.title ?? "";
+});
+watch(
+  () => [currentConversation.value?.id ?? null, currentConversation.value?.title ?? null],
+  ([conversationId, conversationTitle], [previousConversationId]) => {
+    if (conversationId !== previousConversationId) {
+      optimisticTitle.value = null;
+      return;
+    }
+    if (optimisticTitle.value !== null && conversationTitle === optimisticTitle.value) {
+      optimisticTitle.value = null;
+    }
+  }
+);
+const currentUser = computed(() => props.user ?? authUser.value ?? null);
+const conversationCreator = computed(
+  () => resolveConversationCreator(currentConversation.value?.userId, {
+    currentUser: currentUser.value,
+    getMember
+  })
+);
+async function handleSend(content, files, model) {
+  if (!activeConversationId.value || !currentConversation.value) {
+    const conversation = await createConversation({
+      model: model ?? selectedModel.value
+    });
+    if (!conversation)
+      return;
+    updateConversationId(conversation.id);
+    await ensureConversationLoaded(conversation.id);
+    if (!currentConversation.value) {
+      statusToast.update({ text: "Erro ao carregar conversa", icon: "i-ph-warning" });
+      return;
+    }
+  }
+  if (!currentConversation.value)
+    return;
+  await sendMessage(content, files.length > 0 ? files : void 0, model);
+}
+async function handleRetry(messageId) {
+  await retryMessage(messageId);
+}
+async function handleNewConversation() {
+  resetConversation();
+}
+function handleTabChange(tab) {
+  activeTab.value = tab;
+  if (tab === "chat")
+    closeFilesPanel();
+}
+const isEditing = ref(false);
+const editTitle = ref("");
+const justStartedEditing = ref(false);
+const showDebugModal = ref(false);
+const debugSessionId = computed(() => currentConversation.value?.threadSessionId ?? "Sess\xE3o ainda n\xE3o criada");
+function startEditing() {
+  editTitle.value = displayTitle.value;
+  isEditing.value = true;
+  justStartedEditing.value = true;
+  setTimeout(() => {
+    justStartedEditing.value = false;
+  }, 100);
+}
+async function saveTitle() {
+  if (justStartedEditing.value)
+    return;
+  const trimmed = editTitle.value.trim();
+  if (trimmed && trimmed !== currentConversation.value?.title && currentConversation.value) {
+    optimisticTitle.value = trimmed;
+    const success = await renameConversation(currentConversation.value.id, trimmed);
+    if (!success)
+      optimisticTitle.value = null;
+  }
+  isEditing.value = false;
+  justStartedEditing.value = false;
+}
+function cancelEditing() {
+  isEditing.value = false;
+  editTitle.value = "";
+  justStartedEditing.value = false;
+}
+const copiedToClipboard = ref(false);
+async function handleShare() {
+  try {
+    await navigator.clipboard.writeText(window.location.href);
+    copiedToClipboard.value = true;
+    statusToast.update({ text: "Link copiado", icon: "i-ph-check" });
+    setTimeout(() => {
+      copiedToClipboard.value = false;
+    }, 2e3);
+  } catch {
+    statusToast.update({ text: "Erro ao copiar link", icon: "i-ph-warning" });
+  }
+}
+async function handleDuplicate() {
+  if (!currentConversation.value)
+    return;
+  const duplicated = await duplicateConversation(currentConversation.value.id);
+  if (duplicated) {
+    updateConversationId(duplicated.id);
+    await ensureConversationLoaded(duplicated.id);
+  }
+}
+async function handleExport() {
+  if (!currentConversation.value)
+    return;
+  try {
+    const conversation = await $fetch(
+      chatApi.path(`/conversations/${currentConversation.value.id}`),
+      chatApi.withChatHeaders()
+    );
+    exportConversationToMarkdown(conversation);
+  } catch (err) {
+    console.error("Failed to export conversation:", err);
+  }
+}
+const showDeleteModal = ref(false);
+async function handleDelete() {
+  if (!currentConversation.value)
+    return;
+  showDeleteModal.value = false;
+  const deleted = await deleteConversation(currentConversation.value.id);
+  if (deleted) {
+    await handleNewConversation();
+  }
+}
+onBeforeUnmount(() => {
+  clearConversation();
+});
+</script>
+
+<template>
+    <div ref="dropZoneRef" h-full flex bg-white relative>
+        <!-- Sidebar -->
+        <div
+            v-if="!hideSidebar"
+            w-240px h-full flex="~ col" flex-shrink-0
+            bg-neutral-50 b-r=".5px neutral-200"
+        >
+            <div px-12px pt-16px pb-8px>
+                <button
+                    flex items-center justify-center gap-6px
+                    h-32px px-12px w-full
+                    bg-white b=".5px neutral-300" rounded-10px
+                    hover:bg-neutral-50 transition-colors cursor-pointer
+                    @click="handleNewConversation"
+                >
+                    <span i-ph-chat-circle text-12px text-gray-900 />
+                    <span text-14px font-semibold text-neutral-900 tracking="-.15px" leading-18px>
+                        Nova conversa
+                    </span>
+                </button>
+            </div>
+
+            <div flex-1 overflow-y-auto px-4px>
+                <div v-if="visibleConversations.length === 0" p-16px text-center>
+                    <p text-14px text-neutral-400>
+                        Nenhuma conversa ainda
+                    </p>
+                </div>
+                <div v-else flex="~ col" gap-1px px-8px py-8px>
+                    <button
+                        v-for="conv in visibleConversations"
+                        :key="conv.id"
+                        flex items-center gap-8px h-32px px-8px rounded-8px
+                        w-full text-left truncate transition-colors cursor-pointer
+                        :class="conv.id === activeConversationId ? 'bg-neutral-200' : 'hover:bg-neutral-100'"
+                        @click="openConversation(conv.id)"
+                    >
+                        <span text-13px text-neutral-700 truncate>{{ conv.title || "Nova conversa" }}</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main content -->
+        <div flex-1 h-full flex="~ col" overflow-hidden relative style="--chat-panel-offset: 0px">
+            <div v-if="loading && currentConversation" class="loading-bar" />
+
+            <ChatTopbar
+                v-if="currentConversation"
+                :title="displayTitle"
+                :creator-name="conversationCreator?.name ?? void 0"
+                :creator-email="currentConversation.createdBy ?? void 0"
+                :creator-image="conversationCreator?.image ?? void 0"
+                :updated-at="currentConversation.updatedAt"
+                :is-editing="isEditing"
+                :edit-title="editTitle"
+                :generating-title="generatingTitle"
+                :files-count="filesCount"
+                :active-tab="activeTab"
+                :show-outdated-badge="showOutdatedBadge"
+                :show-usage-tab="resolvedFeatures.showUsageTab"
+                :show-debug-option="resolvedFeatures.showDebugOption"
+                @update:is-editing="isEditing = $event"
+                @update:edit-title="editTitle = $event"
+                @save-title="saveTitle"
+                @cancel-editing="cancelEditing"
+                @rename="startEditing"
+                @duplicate="handleDuplicate"
+                @export="handleExport"
+                @copy-link="handleShare"
+                @debug="showDebugModal = true"
+                @delete="showDeleteModal = true"
+                @tab-change="handleTabChange"
+            />
+
+            <div
+                v-if="showOutdatedBanner"
+                mt-64px flex items-center h-36px px-12px bg="#FFF1D8"
+            >
+                <div flex items-center gap-8px flex-1>
+                    <span i-ph-warning text-12px text-gray-900 shrink-0 />
+                    <span text-12px font-580 text-gray-900 leading-16px>
+                        Configurações do workspace alteradas
+                    </span>
+                    <span text-12px text-gray-700 leading-16px>
+                        Inicie uma nova conversa para usar as configurações atualizadas
+                    </span>
+                </div>
+                <div flex items-center gap-24px shrink-0>
+                    <button
+                        flex items-center gap-4px px-10px py-4px
+                        b=".5px gray-500" rounded-8px
+                        class="hover:bg-white/50" transition-colors
+                        @click="handleNewConversation"
+                    >
+                        <span i-ph-plus text-12px text-gray-900 />
+                        <span text-12px font-580 text-gray-900 leading-16px>Nova conversa</span>
+                    </button>
+                    <button
+                        flex items-center justify-center
+                        class="hover:bg-black/5" transition-colors rounded-4px
+                        @click="dismissOutdatedBanner"
+                    >
+                        <span i-ph-x text-12px text-gray-900 />
+                    </button>
+                </div>
+            </div>
+
+            <template v-if="activeTab === 'files' && currentConversation">
+                <ChatFilesView :conversation-id="currentConversation.id" />
+            </template>
+
+            <template v-else-if="activeTab === 'usage' && resolvedFeatures.showUsageTab && currentConversation">
+                <ChatUsageView
+                    :conversation-id="currentConversation.id"
+                    :created-at="currentConversation.createdAt"
+                    :updated-at="currentConversation.updatedAt"
+                />
+            </template>
+
+            <template v-else-if="loading">
+                <div flex-1 pt-64px />
+                <ChatMessageInput
+                    v-model:model="selectedModel"
+                    :disabled="true"
+                />
+            </template>
+
+            <template v-else-if="!hasMessages">
+                <div
+                    flex-1 flex="~ col" items-center justify-center gap-40px px-24px
+                    :class="currentConversation ? 'pt-64px' : ''"
+                >
+                    <div flex="~ col" items-center gap-8px text-center>
+                        <h1 text-24px font-semibold text-gray-800 leading-28px tracking="-.8px">
+                            Olá, {{ currentUser?.name?.split(" ")[0] ?? "usu\xE1rio" }}
+                        </h1>
+                        <p text-16px text-gray-500 leading-20px tracking="-.2px">
+                            Como posso te ajudar hoje?
+                        </p>
+                    </div>
+                    <ChatMessageInput
+                        ref="messageInputRef"
+                        v-model:model="selectedModel"
+                        :disabled="hasPendingMessage"
+                        :loading="hasPendingMessage"
+                        :creator-name="currentUser?.name ?? void 0"
+                        :creator-email="currentConversation?.createdBy ?? currentUser?.email ?? void 0"
+                        :creator-image="currentUser?.image ?? void 0"
+                        :messages="messages"
+                        :conversation-files="conversationFiles"
+                        :workspace-settings="effectiveWorkspaceSettings"
+                        centered
+                        @send="handleSend"
+                        @cancel="cancelConversation"
+                    />
+                </div>
+            </template>
+
+            <template v-else>
+                <ChatMessageList
+                    :messages="messages"
+                    @retry="handleRetry"
+                />
+                <ChatMessageInput
+                    ref="messageInputRef"
+                    v-model:model="selectedModel"
+                    :disabled="hasPendingMessage"
+                    :loading="hasPendingMessage"
+                    :creator-name="currentUser?.name ?? void 0"
+                    :creator-email="currentConversation?.createdBy ?? currentUser?.email ?? void 0"
+                    :creator-image="currentUser?.image ?? void 0"
+                    :messages="messages"
+                    :conversation-files="conversationFiles"
+                    :workspace-settings="effectiveWorkspaceSettings"
+                    has-disclaimer
+                    @send="handleSend"
+                    @cancel="cancelConversation"
+                />
+                <p text-center text-12px font-400 leading-16px text-tertiary my-8px>
+                    As respostas podem conter erros. Verifique documentos originais.
+                </p>
+            </template>
+
+            <Transition name="fade">
+                <div
+                    v-if="isDragging"
+                    class="absolute inset-0 z-50 flex items-center justify-center bg-white/90 backdrop-blur-sm"
+                >
+                    <div
+                        flex="~ col" items-center gap-16px p-40px rounded-24px
+                        border="2 dashed gray-300" bg-gray-50
+                    >
+                        <div w-64px h-64px rounded-full bg-gray-100 flex items-center justify-center>
+                            <span i-ph-upload-simple text-32px text-gray-500 />
+                        </div>
+                        <div text-center>
+                            <p text-18px font-semibold text-gray-800>
+                                Solte o arquivo aqui
+                            </p>
+                            <p text-14px text-gray-500 mt-4px>
+                                O arquivo será anexado à sua mensagem
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </Transition>
+
+            <TelaConfirmationModal
+                v-model:open="showDeleteModal"
+                title="Excluir conversa"
+                variant="danger"
+                confirm-button-text="Excluir"
+                cancel-button-text="Cancelar"
+                @confirm="handleDelete"
+                @cancel="showDeleteModal = false"
+            >
+                Tem certeza que deseja excluir esta conversa? Esta ação não pode ser desfeita.
+            </TelaConfirmationModal>
+
+            <TelaModal
+                :model-value="showDebugModal"
+                title="Debug"
+                hide-dividers
+                compact
+                class="w-520px!"
+                @close="showDebugModal = false"
+            >
+                <div flex="~ col" w-full my-24px gap-24px>
+                    <div flex="~ col" gap-4px w-full>
+                        <p text-14px font-580 text-gray-700 leading-18px>
+                            Chat Id
+                        </p>
+                        <div
+                            px-12px py-10px
+                            rounded-8px
+                            bg-gray-50
+                            justify-between
+                            flex items-center
+                            border="0.5px gray-200"
+                        >
+                            <p text-13px text-gray-700 break-all leading-18px>
+                                {{ activeConversationId ?? "Conversa ainda n\xE3o criada" }}
+                            </p>
+                            <TelaCopyButton :content="activeConversationId ?? ''" />
+                        </div>
+                    </div>
+                    <div flex="~ col" gap-4px w-full>
+                        <p text-14px font-580 text-gray-700 leading-18px>
+                            Thread Session Id (Agent API)
+                        </p>
+                        <div
+                            px-12px py-10px
+                            rounded-8px
+                            bg-gray-50
+                            justify-between
+                            flex items-center
+                            border="0.5px gray-200"
+                        >
+                            <p text-13px text-gray-700 break-all leading-18px>
+                                {{ debugSessionId }}
+                            </p>
+                            <TelaCopyButton :content="debugSessionId" />
+                        </div>
+                    </div>
+                </div>
+            </TelaModal>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.loading-bar{animation:loading-pulse 1.5s ease-in-out infinite;background:linear-gradient(90deg,transparent,#ea580b,#fb923c,#fdba74,transparent);background-size:200% 100%;height:4px;left:0;position:absolute;right:0;top:0;z-index:100}@keyframes loading-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}.fade-enter-from,.fade-leave-to{opacity:0}
+</style>

package/dist/runtime/embed/components/ChatEmbedInner.vue.d.ts

@@ -0,0 +1,19 @@
+import { type ChatActor, type ChatFeatureConfig } from '../../utils/tela-chat.js';
+type EmbedUser = ChatActor;
+type __VLS_Props = {
+    conversationId?: string | null;
+    initialConversationId?: string | null;
+    hideSidebar?: boolean;
+    user?: EmbedUser | null;
+    features?: Partial<ChatFeatureConfig>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:conversationId": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:conversationId"?: ((value: string | null) => any) | undefined;
+}>, {
+    initialConversationId: string | null;
+    hideSidebar: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="2" fill="#3C3C3C" />
+<path d="M3.7 4.15C3.7 3.79 3.99 3.5 4.35 3.5H11.65C12.01 3.5 12.3 3.79 12.3 4.15V10.35C12.3 10.71 12.01 11 11.65 11H8.75L5.85 13.45V11H4.35C3.99 11 3.7 10.71 3.7 10.35V4.15Z" fill="white" />
+</svg>

package/dist/runtime/public/files/archive.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 5.19974 0 3.79961 0.544967 2.73005C1.02433 1.78924 1.78924 1.02433 2.73005 0.544967C3.79961 0 5.19974 0 8 0C10.8003 0 12.2004 0 13.27 0.544967C14.2108 1.02433 14.9757 1.78924 15.455 2.73005C16 3.79961 16 5.19974 16 8C16 10.8003 16 12.2004 15.455 13.27C14.9757 14.2108 14.2108 14.9757 13.27 15.455C12.2004 16 10.8003 16 8 16C5.19974 16 3.79961 16 2.73005 15.455C1.78924 14.9757 1.02433 14.2108 0.544967 13.27C0 12.2004 0 10.8003 0 8Z" fill="#FFB800"/>
+<rect x="6.5" y="3" width="3" height="1.5" rx="0.3" fill="white"/>
+<rect x="6.5" y="5" width="3" height="1.5" rx="0.3" fill="#CC9400"/>
+<rect x="6.5" y="7" width="3" height="1.5" rx="0.3" fill="white"/>
+<rect x="6.5" y="9" width="3" height="1.5" rx="0.3" fill="#CC9400"/>
+<rect x="7" y="11" width="2" height="2" rx="0.5" fill="white"/>
+<rect x="7.5" y="11.5" width="1" height="1" rx="0.2" fill="#CC9400"/>
+</svg>

package/dist/runtime/public/files/audio.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 5.19974 0 3.79961 0.544967 2.73005C1.02433 1.78924 1.78924 1.02433 2.73005 0.544967C3.79961 0 5.19974 0 8 0C10.8003 0 12.2004 0 13.27 0.544967C14.2108 1.02433 14.9757 1.78924 15.455 2.73005C16 3.79961 16 5.19974 16 8C16 10.8003 16 12.2004 15.455 13.27C14.9757 14.2108 14.2108 14.9757 13.27 15.455C12.2004 16 10.8003 16 8 16C5.19974 16 3.79961 16 2.73005 15.455C1.78924 14.9757 1.02433 14.2108 0.544967 13.27C0 12.2004 0 10.8003 0 8Z" fill="#148EB4"/>
+<path d="M6.125 3.0752C6.23772 3.0752 6.34608 3.11952 6.42578 3.19922C6.50548 3.27892 6.5498 3.38728 6.5498 3.5V12.5C6.5498 12.6127 6.50548 12.7211 6.42578 12.8008C6.34608 12.8805 6.23772 12.9248 6.125 12.9248C6.01228 12.9248 5.90392 12.8805 5.82422 12.8008C5.74452 12.7211 5.7002 12.6127 5.7002 12.5V3.5C5.7002 3.38728 5.74452 3.27892 5.82422 3.19922C5.90392 3.11952 6.01228 3.0752 6.125 3.0752ZM8 4.5752C8.11272 4.5752 8.22108 4.61952 8.30078 4.69922C8.38048 4.77892 8.4248 4.88728 8.4248 5V11C8.4248 11.1127 8.38048 11.2211 8.30078 11.3008C8.22108 11.3805 8.11272 11.4248 8 11.4248C7.88728 11.4248 7.77892 11.3805 7.69922 11.3008C7.61952 11.2211 7.5752 11.1127 7.5752 11V5C7.5752 4.88728 7.61952 4.77892 7.69922 4.69922C7.77892 4.61952 7.88728 4.5752 8 4.5752ZM11.75 5.3252C11.8627 5.3252 11.9711 5.36952 12.0508 5.44922C12.1305 5.52892 12.1748 5.63728 12.1748 5.75V10.25C12.1748 10.3627 12.1305 10.4711 12.0508 10.5508C11.9711 10.6305 11.8627 10.6748 11.75 10.6748C11.6373 10.6748 11.5289 10.6305 11.4492 10.5508C11.3695 10.4711 11.3252 10.3627 11.3252 10.25V5.75C11.3252 5.63728 11.3695 5.52892 11.4492 5.44922C11.5289 5.36952 11.6373 5.3252 11.75 5.3252ZM4.25 6.0752C4.36272 6.0752 4.47108 6.11952 4.55078 6.19922C4.63048 6.27892 4.6748 6.38728 4.6748 6.5V9.5C4.6748 9.61272 4.63048 9.72108 4.55078 9.80078C4.47108 9.88048 4.36272 9.9248 4.25 9.9248C4.13728 9.9248 4.02892 9.88048 3.94922 9.80078C3.86952 9.72108 3.8252 9.61272 3.8252 9.5V6.5C3.8252 6.38728 3.86952 6.27892 3.94922 6.19922C4.02892 6.11952 4.13728 6.0752 4.25 6.0752ZM9.875 6.0752C9.98772 6.0752 10.0961 6.11952 10.1758 6.19922C10.2555 6.27892 10.2998 6.38728 10.2998 6.5V9.5C10.2998 9.61272 10.2555 9.72108 10.1758 9.80078C10.0961 9.88048 9.98772 9.9248 9.875 9.9248C9.76228 9.9248 9.65392 9.88048 9.57422 9.80078C9.49452 9.72108 9.4502 9.61272 9.4502 9.5V6.5C9.4502 6.38728 9.49452 6.27892 9.57422 6.19922C9.65392 6.11952 9.76228 6.0752 9.875 6.0752Z" fill="white" stroke="white" stroke-width="0.1"/>
+</svg>

package/dist/runtime/public/files/c.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 5.19974 0 3.79961 0.544967 2.73005C1.02433 1.78924 1.78924 1.02433 2.73005 0.544967C3.79961 0 5.19974 0 8 0C10.8003 0 12.2004 0 13.27 0.544967C14.2108 1.02433 14.9757 1.78924 15.455 2.73005C16 3.79961 16 5.19974 16 8C16 10.8003 16 12.2004 15.455 13.27C14.9757 14.2108 14.2108 14.9757 13.27 15.455C12.2004 16 10.8003 16 8 16C5.19974 16 3.79961 16 2.73005 15.455C1.78924 14.9757 1.02433 14.2108 0.544967 13.27C0 12.2004 0 10.8003 0 8Z" fill="#A8B9CC"/>
+<path d="M11 5.5C10.3 4.6 9.2 4 8 4C5.8 4 4 5.8 4 8C4 10.2 5.8 12 8 12C9.2 12 10.3 11.4 11 10.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/dist/runtime/public/files/cpp.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 5.19974 0 3.79961 0.544967 2.73005C1.02433 1.78924 1.78924 1.02433 2.73005 0.544967C3.79961 0 5.19974 0 8 0C10.8003 0 12.2004 0 13.27 0.544967C14.2108 1.02433 14.9757 1.78924 15.455 2.73005C16 3.79961 16 5.19974 16 8C16 10.8003 16 12.2004 15.455 13.27C14.9757 14.2108 14.2108 14.9757 13.27 15.455C12.2004 16 10.8003 16 8 16C5.19974 16 3.79961 16 2.73005 15.455C1.78924 14.9757 1.02433 14.2108 0.544967 13.27C0 12.2004 0 10.8003 0 8Z" fill="#00599C"/>
+<path d="M8.5 5.5C7.9 4.6 6.9 4 5.8 4C3.9 4 2.3 5.8 2.3 8C2.3 10.2 3.9 12 5.8 12C6.9 12 7.9 11.4 8.5 10.5" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M10.5 7V9M9.5 8H11.5" stroke="white" stroke-width="1" stroke-linecap="round"/>
+<path d="M13.5 7V9M12.5 8H14.5" stroke="white" stroke-width="1" stroke-linecap="round"/>
+</svg>

package/dist/runtime/public/files/css.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8C0 5.19974 0 3.79961 0.544967 2.73005C1.02433 1.78924 1.78924 1.02433 2.73005 0.544967C3.79961 0 5.19974 0 8 0C10.8003 0 12.2004 0 13.27 0.544967C14.2108 1.02433 14.9757 1.78924 15.455 2.73005C16 3.79961 16 5.19974 16 8C16 10.8003 16 12.2004 15.455 13.27C14.9757 14.2108 14.2108 14.9757 13.27 15.455C12.2004 16 10.8003 16 8 16C5.19974 16 3.79961 16 2.73005 15.455C1.78924 14.9757 1.02433 14.2108 0.544967 13.27C0 12.2004 0 10.8003 0 8Z" fill="#264DE4"/>
+<path d="M4 4L4.7 11.5L8 12.5L11.3 11.5L12 4H4ZM10.5 5.5L10.4 6.5H6.6L6.7 7.5H10.3L10 11L8 11.5L6 11L5.9 9.5H6.9L6.95 10.3L8 10.5L9.05 10.3L9.15 8.5H5.8L5.5 5.5H10.5Z" fill="white"/>
+</svg>