ai-parrot 0.17.2__cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl

agentui/src/lib/api/http.ts

@@ -0,0 +1,25 @@
+import axios from 'axios';
+import { config } from '$lib/config';
+
+const apiClient = axios.create({
+  baseURL: config.apiBaseUrl,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+apiClient.interceptors.request.use((config) => {
+  if (typeof window === 'undefined') {
+    return config;
+  }
+
+  const token = localStorage.getItem(config.tokenStorageKey);
+  if (token) {
+    config.headers = config.headers || {};
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+export default apiClient;

agentui/src/lib/components/BotCard.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import type { BotSummary } from '$lib/api/bots';
+
+  export let bot: BotSummary;
+
+  function handleClick() {
+    goto(`/talk/${bot.chatbot_id}`);
+  }
+</script>
+
+<button
+  class="card group cursor-pointer border border-base-200 bg-base-100/80 text-left transition hover:-translate-y-1 hover:border-primary/50 hover:shadow-xl"
+  type="button"
+  on:click={handleClick}
+>
+  <div class="card-body gap-4">
+    <div class="flex items-center gap-3">
+      <div class="rounded-2xl bg-primary/10 p-3 text-primary">🤖</div>
+      <div>
+        <h3 class="text-xl font-semibold text-base-content">{bot.name}</h3>
+        <p class="text-xs uppercase tracking-wide text-base-content/50">{bot.category}</p>
+      </div>
+    </div>
+    <p class="text-sm text-base-content/70">
+      {bot.description}
+    </p>
+    <div class="flex items-center justify-between text-xs text-base-content/60">
+      <span>Owner: {bot.owner}</span>
+      <span class="font-semibold text-primary group-hover:text-secondary">Start chat →</span>
+    </div>
+  </div>
+</button>

agentui/src/lib/components/ChatBubble.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import { marked } from 'marked';
+  import DOMPurify from 'isomorphic-dompurify';
+
+  const props = $props<{
+    role?: 'user' | 'assistant';
+    content?: string;
+    timestamp?: string;
+    turnId?: string;
+    selectable?: boolean;
+    selected?: boolean;
+  }>();
+
+  const role = $derived(props.role ?? 'user');
+  const content = $derived(props.content ?? '');
+  const timestamp = $derived(props.timestamp ?? '');
+  const turnId = $derived(props.turnId);
+  const selectable = $derived(props.selectable ?? false);
+  const selected = $derived(props.selected ?? false);
+
+  const dispatch = createEventDispatcher<{ select: { turnId: string } }>();
+
+  const sanitizedHtml = $derived(() => {
+    const raw = marked.parse(content || '');
+    return DOMPurify.sanitize(raw);
+  });
+
+  function handleClick() {
+    if (selectable && turnId) {
+      dispatch('select', { turnId });
+    }
+  }
+</script>
+
+<div
+  class={`flex ${role === 'user' ? 'justify-end' : 'justify-start'}`}
+  on:click={handleClick}
+>
+  <div
+    class={`max-w-3xl rounded-3xl border ${
+      role === 'user'
+        ? 'bg-primary text-primary-content border-primary/20'
+        : 'bg-base-200/70 text-base-content border-base-300'
+    } p-4 text-sm shadow-sm transition ${selectable ? 'cursor-pointer hover:ring-2 hover:ring-primary/40' : ''} ${
+      selected ? 'ring-2 ring-primary' : ''
+    }`}
+  >
+    <div class="mb-2 flex items-center gap-2 text-xs opacity-70">
+      <span class="font-semibold capitalize">{role}</span>
+      <span>•</span>
+      <span>{new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+    </div>
+
+    {#if role === 'assistant'}
+      <div class="chat-markdown" on:click|stopPropagation>
+        {@html sanitizedHtml}
+      </div>
+    {:else}
+      <p class="whitespace-pre-wrap">{content}</p>
+    {/if}
+  </div>
+</div>

agentui/src/lib/components/Toast.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { toastStore, type ToastMessage } from '$lib/stores/toast.svelte.ts';
+
+  let toasts = $state<ToastMessage[]>([]);
+
+  $effect(() => {
+    const unsubscribe = toastStore.subscribe((items) => {
+      toasts = items;
+    });
+
+    return () => unsubscribe();
+  });
+</script>
+
+<div class="toast toast-end z-[1000]">
+  {#each toasts as toast (toast.id)}
+    <div class={`alert alert-${toast.type}`}>
+      <span>{toast.message}</span>
+    </div>
+  {/each}
+</div>

agentui/src/lib/config.ts

@@ -0,0 +1,20 @@
+const DEFAULT_API = 'http://localhost:5000';
+const rawBaseUrl = import.meta.env?.VITE_API_URL ?? DEFAULT_API;
+const apiBaseUrl = rawBaseUrl.replace(/\/$/, '');
+const authUrlFromEnv = import.meta.env?.VITE_AUTH_URL;
+const authUrl = (authUrlFromEnv ? authUrlFromEnv : `${apiBaseUrl}/api/v1/login`).replace(/\/$/, '');
+const environmentLabel = import.meta.env?.VITE_AGENTUI_ENV || 'local';
+const defaultUsername = import.meta.env?.VITE_AGENTUI_USERNAME || '';
+const defaultPassword = import.meta.env?.VITE_AGENTUI_PASSWORD || '';
+const storageNamespace = `agentui.${environmentLabel}`;
+
+export const config = {
+  apiBaseUrl,
+  authUrl,
+  environmentLabel,
+  defaultUsername,
+  defaultPassword,
+  storageNamespace,
+  tokenStorageKey: `${storageNamespace}.token`,
+  conversationStoragePrefix: `${storageNamespace}.conversation`
+};

agentui/src/lib/stores/auth.svelte.ts

@@ -0,0 +1,73 @@
+import apiClient from '$lib/api/http';
+import { writable, get } from 'svelte/store';
+import { config } from '$lib/config';
+
+type AuthState = {
+  loading: boolean;
+  isAuthenticated: boolean;
+  token: string | null;
+  user: { username: string } | null;
+};
+
+const STORAGE_KEY = config.tokenStorageKey;
+
+function createAuthStore() {
+  const internal = writable<AuthState>({
+    loading: true,
+    isAuthenticated: false,
+    token: null,
+    user: null
+  });
+
+  const { subscribe, update, set } = internal;
+
+  async function init() {
+    if (typeof window === 'undefined') return;
+    const token = localStorage.getItem(STORAGE_KEY);
+    if (token) {
+      set({ loading: false, isAuthenticated: true, token, user: null });
+    } else {
+      set({ loading: false, isAuthenticated: false, token: null, user: null });
+    }
+  }
+
+  async function login(username: string, password: string) {
+    update((state) => ({ ...state, loading: true }));
+    try {
+      const { data } = await apiClient.post(config.authUrl, { username, password });
+      const token = data?.access_token || data?.token;
+      if (typeof window !== 'undefined' && token) {
+        localStorage.setItem(STORAGE_KEY, token);
+      }
+      set({ loading: false, isAuthenticated: true, token: token || null, user: { username } });
+      return { success: true };
+    } catch (error: any) {
+      set({ loading: false, isAuthenticated: false, token: null, user: null });
+      return {
+        success: false,
+        error: error?.response?.data?.message || error?.message || 'Login failed'
+      };
+    }
+  }
+
+  function logout() {
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(STORAGE_KEY);
+    }
+    set({ loading: false, isAuthenticated: false, token: null, user: null });
+  }
+
+  function getToken() {
+    return get(internal).token;
+  }
+
+  return {
+    subscribe,
+    init,
+    login,
+    logout,
+    getToken
+  };
+}
+
+export const authStore = createAuthStore();

agentui/src/lib/stores/theme.svelte.js

@@ -0,0 +1,64 @@
+import { writable } from 'svelte/store';
+
+export const THEMES = [
+  'light',
+  'dark',
+  'cupcake',
+  'bumblebee',
+  'emerald',
+  'corporate',
+  'synthwave',
+  'retro',
+  'cyberpunk',
+  'valentine',
+  'garden',
+  'aqua',
+  'lofi',
+  'pastel',
+  'fantasy',
+  'wireframe',
+  'black',
+  'luxury',
+  'dracula'
+];
+
+const defaultTheme = 'light';
+
+function createThemeStore() {
+  const { subscribe, update, set } = writable({ currentTheme: defaultTheme });
+
+  function applyTheme(theme) {
+    if (typeof document === 'undefined') return;
+    document.documentElement.setAttribute('data-theme', theme);
+  }
+
+  return {
+    subscribe,
+    init: () => {
+      if (typeof window === 'undefined') return;
+      const stored = localStorage.getItem('agentui.theme') || defaultTheme;
+      set({ currentTheme: stored });
+      applyTheme(stored);
+    },
+    setTheme: (theme) => {
+      update(() => ({ currentTheme: theme }));
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('agentui.theme', theme);
+      }
+      applyTheme(theme);
+    },
+    toggleDarkMode: () => {
+      let next = 'dark';
+      update((state) => {
+        next = state.currentTheme === 'dark' ? defaultTheme : 'dark';
+        return { currentTheme: next };
+      });
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('agentui.theme', next);
+      }
+      applyTheme(next);
+    }
+  };
+}
+
+export const themeStore = createThemeStore();

agentui/src/lib/stores/toast.svelte.ts

@@ -0,0 +1,31 @@
+import { writable } from 'svelte/store';
+
+type ToastType = 'success' | 'error' | 'info';
+
+export type ToastMessage = {
+  id: string;
+  type: ToastType;
+  message: string;
+  duration: number;
+};
+
+function createToastStore() {
+  const { subscribe, update } = writable<ToastMessage[]>([]);
+
+  function push(type: ToastType, message: string, duration = 3000) {
+    const id = crypto.randomUUID();
+    update((toasts) => [...toasts, { id, type, message, duration }]);
+    setTimeout(() => {
+      update((toasts) => toasts.filter((toast) => toast.id !== id));
+    }, duration);
+  }
+
+  return {
+    subscribe,
+    success: (message: string, duration?: number) => push('success', message, duration),
+    error: (message: string, duration?: number) => push('error', message, duration),
+    info: (message: string, duration?: number) => push('info', message, duration)
+  };
+}
+
+export const toastStore = createToastStore();

agentui/src/lib/utils/conversation.ts

@@ -0,0 +1,39 @@
+import type { ChatResponse } from '$lib/api/chat';
+import { config } from '$lib/config';
+
+const STORAGE_PREFIX = config.conversationStoragePrefix;
+
+type ConversationPayload = {
+  turns: Record<string, ChatResponse>;
+  order: string[];
+};
+
+function getKey(agentId: string) {
+  return `${STORAGE_PREFIX}.${agentId}`;
+}
+
+export function saveTurn(agentId: string, turn: ChatResponse) {
+  if (typeof window === 'undefined') return;
+  const raw = localStorage.getItem(getKey(agentId));
+  const payload: ConversationPayload = raw ? JSON.parse(raw) : { turns: {}, order: [] };
+  payload.turns[turn.turn_id] = turn;
+  if (!payload.order.includes(turn.turn_id)) {
+    payload.order.push(turn.turn_id);
+  }
+  localStorage.setItem(getKey(agentId), JSON.stringify(payload));
+}
+
+export function getTurn(agentId: string, turnId: string) {
+  if (typeof window === 'undefined') return null;
+  const raw = localStorage.getItem(getKey(agentId));
+  if (!raw) return null;
+  const payload: ConversationPayload = JSON.parse(raw);
+  return payload.turns[turnId] || null;
+}
+
+export function loadConversation(agentId: string) {
+  if (typeof window === 'undefined') return { turns: {}, order: [] };
+  const raw = localStorage.getItem(getKey(agentId));
+  if (!raw) return { turns: {}, order: [] };
+  return JSON.parse(raw) as ConversationPayload;
+}

agentui/src/routes/+layout.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { onMount } from 'svelte';
+  import { authStore } from '$lib/stores/auth.svelte.ts';
+  import { themeStore } from '$lib/stores/theme.svelte.js';
+  import Toast from '$lib/components/Toast.svelte';
+  import '../app.css';
+
+  // Initialize stores on mount
+  onMount(() => {
+    authStore.init();
+    themeStore.init(); // Initialize theme store
+  });
+</script>
+
+<div class="min-h-screen">
+  <slot />
+</div>
+
+<!-- Global toast notifications -->
+<Toast />

agentui/src/routes/+page.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import { authStore } from '$lib/stores/auth.svelte.ts';
+  import { botsApi, type BotSummary } from '$lib/api/bots';
+  import { BotCard, LoadingSpinner, ThemeSwitcher } from '../components';
+  import { config } from '$lib/config';
+
+  let bots = $state<BotSummary[]>([]);
+  let loading = $state(true);
+  let error = $state('');
+  let searchTerm = $state('');
+  let selectedCategory = $state('All');
+  const categories = $derived(() => {
+    const uniqueCategories = Array.from(
+      new Set(bots.map((bot) => bot.category?.trim() || 'Lifestyle & Wellness'))
+    );
+    return ['All', ...uniqueCategories];
+  });
+
+  $effect(() => {
+    if (!categories.includes(selectedCategory)) {
+      selectedCategory = 'All';
+    }
+  });
+
+  async function fetchBots() {
+    if (!browser) return;
+
+    loading = true;
+    error = '';
+
+    try {
+      const response = await botsApi.listBots();
+      bots = response.bots || [];
+    } catch (err: any) {
+      console.error('Failed to load bots', err);
+      error =
+        err?.response?.data?.message || err?.message || 'Unable to load your agents right now.';
+      bots = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  let hasFetchedBots = false;
+
+  const filteredBots = $derived(() => {
+    let list = bots;
+
+    if (selectedCategory !== 'All') {
+      list = list.filter(
+        (bot) => (bot.category || 'Lifestyle & Wellness') === selectedCategory
+      );
+    }
+
+    if (searchTerm.trim()) {
+      const search = searchTerm.trim().toLowerCase();
+      list = list.filter(
+        (bot) =>
+          bot.name.toLowerCase().includes(search) ||
+          bot.description?.toLowerCase().includes(search)
+      );
+    }
+
+    return list;
+  });
+
+  function selectCategory(category: string) {
+    selectedCategory = category;
+  }
+
+  function handleLogout() {
+    authStore.logout();
+  }
+
+  const environmentLabel = config.environmentLabel;
+
+  onMount(() => {
+    if (!browser) return;
+
+    const unsubscribe = authStore.subscribe((state) => {
+      if (state.loading) return;
+
+      if (!state.isAuthenticated) {
+        hasFetchedBots = false;
+        if (window.location.pathname !== '/login') {
+          goto('/login');
+        }
+        return;
+      }
+
+      if (!hasFetchedBots) {
+        hasFetchedBots = true;
+        fetchBots();
+      }
+    });
+
+    return () => {
+      hasFetchedBots = false;
+      unsubscribe();
+    };
+  });
+</script>
+
+<svelte:head>
+  <title>Agents - AgentUI</title>
+</svelte:head>
+
+{#if $authStore.loading}
+  <div class="flex min-h-screen items-center justify-center">
+    <LoadingSpinner text="Loading your workspace..." />
+  </div>
+{:else}
+  <div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(79,70,229,0.1),_transparent)]">
+    <div class="flex min-h-screen">
+      <!-- Sidebar -->
+      <aside class="hidden w-64 flex-shrink-0 flex-col border-r border-base-200 bg-base-100/80 p-6 lg:flex">
+        <div class="mb-8 flex items-center gap-3">
+          <div class="flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-lg font-semibold text-primary">
+            🦜
+          </div>
+          <div>
+            <p class="text-xs uppercase tracking-[0.2em] text-base-content/60">AI Parrot</p>
+            <h1 class="text-xl font-semibold">AgentUI</h1>
+          </div>
+        </div>
+
+        <nav class="space-y-2">
+          <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">Workspace</p>
+          <a class="btn btn-ghost btn-sm justify-start gap-3 text-base-content">
+            <span class="rounded-full bg-primary/10 px-2 py-1 text-xs font-semibold text-primary">New</span>
+            Create agent
+          </a>
+          <a class="btn btn-ghost btn-sm justify-start gap-3 text-base-content">Browse agents</a>
+        </nav>
+
+        <div class="mt-8 space-y-3">
+          <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">Categories</p>
+          {#each categories as category}
+            <button
+              class={`btn btn-ghost btn-sm w-full justify-between ${
+                selectedCategory === category ? 'bg-primary/10 text-primary' : 'text-base-content/80'
+              }`}
+              type="button"
+              on:click={() => selectCategory(category)}
+            >
+              <span>{category}</span>
+              {#if selectedCategory === category}
+                <span class="text-xs font-semibold">●</span>
+              {/if}
+            </button>
+          {/each}
+        </div>
+
+        <div class="mt-auto rounded-2xl bg-gradient-to-br from-primary to-indigo-600 p-5 text-primary-content">
+          <p class="text-sm font-semibold">Need help?</p>
+          <p class="text-sm opacity-80">Our team is one click away.</p>
+          <button class="btn btn-sm mt-4 border-none bg-white/20 text-white">Contact us</button>
+        </div>
+      </aside>
+
+      <!-- Main content -->
+      <main class="flex-1 p-6 lg:p-10">
+        <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <p class="text-sm text-base-content/70">All assistants for specific tasks</p>
+            <h2 class="text-3xl font-bold">Agents</h2>
+            {#if environmentLabel}
+              <div class="badge badge-outline badge-sm mt-2 uppercase tracking-wide">
+                {environmentLabel}
+              </div>
+            {/if}
+          </div>
+          <div class="flex items-center gap-3">
+            <ThemeSwitcher showLabel={false} buttonClass="btn btn-sm btn-ghost" />
+            <button class="btn btn-outline btn-sm" type="button" on:click={handleLogout}>Logout</button>
+          </div>
+        </div>
+
+        <div class="mb-8 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div class="flex items-center gap-3 rounded-2xl border border-base-200 bg-base-100 px-4 py-3 shadow-sm">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 text-base-content/60"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              class="flex-1 bg-transparent text-sm outline-none"
+              placeholder="Search agents"
+              bind:value={searchTerm}
+            />
+          </div>
+          <div class="flex gap-3">
+            <button class="btn btn-primary">Create AI agent</button>
+            <button class="btn btn-outline">Browse agents</button>
+          </div>
+        </div>
+
+        {#if error}
+          <div class="alert alert-error mb-6">
+            <span>{error}</span>
+          </div>
+        {/if}
+
+        {#if loading}
+          <div class="flex min-h-[40vh] items-center justify-center">
+            <LoadingSpinner text="Loading agents..." />
+          </div>
+        {:else}
+          {#if filteredBots.length === 0}
+            <div class="rounded-3xl border border-dashed border-base-300 bg-base-100/80 p-10 text-center">
+              <p class="text-lg font-semibold">No agents match your filters.</p>
+              <p class="text-sm text-base-content/70">Try another category or clear the search box.</p>
+            </div>
+          {:else}
+            <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+              {#each filteredBots as bot (bot.id)}
+                <BotCard {bot} />
+              {/each}
+            </div>
+          {/if}
+        {/if}
+      </main>
+    </div>
+  </div>
+{/if}