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

agentui/src/routes/login/+page.svelte

@@ -0,0 +1,200 @@
+<script>
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import { authStore } from '$lib/stores/auth.svelte.ts';
+  import { toastStore } from '$lib/stores/toast.svelte.ts';
+  import { LoadingSpinner } from '../../components';
+  import { config } from '$lib/config';
+
+  let username = $state(config.defaultUsername);
+  let password = $state(config.defaultPassword);
+  let error = $state('');
+  let loading = $state(false);
+  let showPassword = $state(false);
+  const environmentLabel = config.environmentLabel;
+
+  // Redirect if already authenticated
+  onMount(() => {
+    if ($authStore.isAuthenticated) {
+      goto('/');
+    }
+  });
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    error = '';
+    loading = true;
+
+    const result = await authStore.login(username, password);
+
+    if (!result.success) {
+      error = result.error;
+      loading = false;
+
+      // Show toast notification for better UX
+      toastStore.error(result.error, 5000);
+    } else {
+      loading = false;
+      toastStore.success('Login successful! Redirecting...', 2000);
+      goto('/');
+    }
+  }
+
+  function togglePasswordVisibility() {
+    showPassword = !showPassword;
+  }
+</script>
+
+<svelte:head>
+  <title>Login - AgentUI</title>
+</svelte:head>
+
+<div class="flex min-h-screen items-center justify-center bg-base-200 px-4 py-12">
+  <div class="w-full max-w-md">
+    <!-- Logo/Title -->
+    <div class="mb-8 text-center">
+      <h1 class="mb-2 text-4xl font-bold text-primary">AI-Parrot</h1>
+      <p class="text-base-content/70">AgentUI</p>
+      {#if environmentLabel}
+        <div class="badge badge-outline mt-2 uppercase tracking-wide">{environmentLabel}</div>
+      {/if}
+    </div>
+
+    <!-- Login Card -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title justify-center text-2xl">Welcome back</h2>
+        <p class="text-center text-sm text-base-content/70">Sign in to talk with your agents</p>
+
+        {#if error}
+          <div class="alert alert-error mt-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 shrink-0 stroke-current"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <span>{error}</span>
+          </div>
+        {/if}
+
+        <form onsubmit={handleSubmit} class="mt-4 space-y-4">
+          <!-- Username -->
+          <div class="form-control">
+            <label class="label" for="username">
+              <span class="label-text">Username or Email</span>
+            </label>
+            <input
+              id="username"
+              type="text"
+              placeholder="Enter your username or email"
+              class="input input-bordered w-full"
+              bind:value={username}
+              disabled={loading}
+              required
+              autocomplete="username"
+            />
+          </div>
+
+          <!-- Password -->
+          <div class="form-control">
+            <label class="label" for="password">
+              <span class="label-text">Password</span>
+            </label>
+            <div class="relative">
+              <input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="Enter your password"
+                class="input input-bordered w-full pr-12"
+                bind:value={password}
+                disabled={loading}
+                required
+                autocomplete="current-password"
+              />
+              <button
+                type="button"
+                class="btn btn-ghost btn-sm absolute right-1 top-1"
+                onclick={togglePasswordVisibility}
+                tabindex="-1"
+                aria-label={showPassword ? 'Hide password' : 'Show password'}
+              >
+                {#if showPassword}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                    />
+                  </svg>
+                {:else}
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-5 w-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                    />
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                    />
+                  </svg>
+                {/if}
+              </button>
+            </div>
+            <label class="label">
+              <a href="/forgot-password" class="link-hover link label-text-alt">
+                Forgot password?
+              </a>
+            </label>
+          </div>
+
+          <!-- Submit Button -->
+          <button type="submit" class="btn btn-primary w-full" disabled={loading}>
+            {#if loading}
+              <LoadingSpinner size="sm" text="Signing in..." center={false} />
+            {:else}
+              Sign In
+            {/if}
+          </button>
+        </form>
+
+        <!-- Divider -->
+        <div class="divider">OR</div>
+
+        <!-- Register Link -->
+        <div class="text-center">
+          <p class="text-sm">Use the same credentials you use for the rest of AI Parrot.</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="mt-8 text-center text-sm text-base-content/60">
+      <p>© 2025 AI-Parrot AgentUI. All rights reserved.</p>
+    </div>
+  </div>
+</div>

agentui/src/routes/talk/[agentId]/+page.svelte

@@ -0,0 +1,297 @@
+<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 { chatApi, type ChatResponse } from '$lib/api/chat';
+  import { getTurn, saveTurn, loadConversation } from '$lib/utils/conversation';
+  import { ChatBubble, LoadingSpinner } from '../../../components';
+
+  export let data: { agentId: string };
+
+  let agent: BotSummary | null = $state(null);
+  type ChatMessage = {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    timestamp: string;
+    turnId?: string;
+  };
+
+  let messages = $state<ChatMessage[]>([]);
+  let input = $state('');
+  let sending = $state(false);
+  let loading = $state(true);
+  let error = $state('');
+  let leftMenu = ['Chat', 'Content', 'Prompts', 'Playbooks'];
+  let selectedMenu = $state('Chat');
+  let selectedTurnId = $state<string | null>(null);
+  let selectedTurn = $state<ChatResponse | null>(null);
+  let storedTurnOrder = $state<string[]>([]);
+
+  const agentId = data.agentId;
+
+  async function loadAgent() {
+    if (!browser) return;
+    loading = true;
+    error = '';
+
+    try {
+      agent = await botsApi.getBot(agentId);
+    } catch (err: any) {
+      console.error('Failed to load agent', err);
+      error = err?.response?.data?.message || 'Unable to load the agent right now.';
+      agent = null;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function loadStoredTurns() {
+    if (!browser) return;
+    const conversation = loadConversation(agentId);
+    storedTurnOrder = conversation.order;
+  }
+
+  async function sendMessage() {
+    if (!input.trim() || sending) return;
+
+    const text = input.trim();
+    input = '';
+
+    const userMessage = {
+      id: crypto.randomUUID(),
+      role: 'user' as const,
+      content: text,
+      timestamp: new Date().toISOString()
+    };
+    messages = [...messages, userMessage];
+    sending = true;
+    error = '';
+
+    try {
+      const response = await chatApi.sendChat(agentId, { query: text });
+      const reply = response?.response || response?.message || 'The agent did not return a response.';
+
+      const assistantMessage = {
+        id: crypto.randomUUID(),
+        role: 'assistant' as const,
+        content: reply,
+        timestamp: new Date().toISOString(),
+        turnId: response?.turn_id
+      };
+      messages = [...messages, assistantMessage];
+      if (response?.turn_id) {
+        saveTurn(agentId, response);
+        loadStoredTurns();
+        selectedTurnId = response.turn_id;
+        selectedTurn = response;
+      }
+    } catch (err: any) {
+      console.error('Chat failed', err);
+      error = err?.response?.data?.message || err?.message || 'Chat failed. Please try again.';
+      messages = messages.filter((message) => message.id !== userMessage.id);
+    } finally {
+      sending = false;
+    }
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      sendMessage();
+    }
+  }
+
+  onMount(() => {
+    if (!browser) return;
+    if (!$authStore.isAuthenticated && !$authStore.loading) {
+      goto('/login');
+      return;
+    }
+    loadAgent();
+    loadStoredTurns();
+  });
+
+  function handleBubbleSelect(event: CustomEvent<{ turnId: string }>) {
+    const { turnId } = event.detail;
+    if (!turnId) return;
+    selectedTurnId = turnId;
+    selectedTurn = getTurn(agentId, turnId);
+  }
+</script>
+
+<svelte:head>
+  <title>Chat - {agent?.name || 'Agent'}</title>
+</svelte:head>
+
+{#if loading}
+  <div class="flex min-h-screen items-center justify-center">
+    <LoadingSpinner text="Loading agent..." />
+  </div>
+{:else if !agent}
+  <div class="flex min-h-screen flex-col items-center justify-center gap-4">
+    <p class="text-lg font-semibold text-base-content/80">{error || 'Agent not found.'}</p>
+    <button class="btn btn-primary" on:click={() => goto('/')}>Back to agents</button>
+  </div>
+{:else}
+  <div class="min-h-screen bg-base-200/40">
+    <div class="mx-auto flex min-h-screen max-w-[1400px] gap-6 p-4 lg:p-8">
+      <!-- Left rail -->
+      <aside class="hidden w-56 flex-col rounded-3xl bg-base-100 p-6 shadow-xl lg:flex">
+        <div class="mb-6">
+          <p class="text-sm font-semibold text-base-content/60">{agent.category || 'Agent'}</p>
+          <h2 class="text-2xl font-bold">{agent.name}</h2>
+          <p class="text-sm text-base-content/70">{agent.description}</p>
+        </div>
+        <nav class="space-y-2">
+          {#each leftMenu as item}
+            <button
+              class={`btn btn-ghost w-full justify-start ${
+                selectedMenu === item ? 'bg-primary/10 text-primary' : 'text-base-content/80'
+              }`}
+              type="button"
+              on:click={() => (selectedMenu = item)}
+            >
+              {item}
+            </button>
+          {/each}
+        </nav>
+        <div class="mt-auto rounded-2xl bg-gradient-to-br from-primary to-indigo-600 p-4 text-sm text-primary-content">
+          <p class="font-semibold">Coming soon</p>
+          <p class="opacity-80">Quick access to prompts, automations, and knowledge.</p>
+        </div>
+      </aside>
+
+      <!-- Chat area -->
+      <section class="flex flex-1 flex-col gap-4">
+        <div class="rounded-3xl border border-base-200 bg-base-100 p-4 shadow-sm">
+          <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+            <div>
+              <p class="text-sm text-base-content/60">Chat with</p>
+              <h1 class="text-2xl font-bold">{agent.name}</h1>
+            </div>
+            <div class="flex items-center gap-2 text-sm text-success">
+              <span class="h-2 w-2 rounded-full bg-success"></span>
+              Available
+            </div>
+          </div>
+        </div>
+
+        <div class="flex flex-1 flex-col gap-4 rounded-3xl border border-base-200 bg-base-100 p-6 shadow-lg">
+          <div class="flex-1 space-y-4 overflow-y-auto pr-2">
+            {#if messages.length === 0}
+              <div class="rounded-2xl bg-base-200/60 p-6 text-center text-base-content/70">
+                Say hello to start the conversation.
+              </div>
+            {:else}
+              {#each messages as message (message.id)}
+                <ChatBubble
+                  role={message.role}
+                  content={message.content}
+                  timestamp={message.timestamp}
+                  turnId={message.turnId}
+                  selectable={message.role === 'assistant'}
+                  selected={message.turnId ? message.turnId === selectedTurnId : false}
+                  on:select={handleBubbleSelect}
+                />
+              {/each}
+            {/if}
+          </div>
+
+          {#if error}
+            <div class="alert alert-error">
+              <span>{error}</span>
+            </div>
+          {/if}
+
+          <div class="rounded-2xl border border-base-200 bg-base-100 p-4 shadow-inner">
+            <textarea
+              class="textarea textarea-ghost min-h-[120px] w-full resize-none text-base"
+              placeholder={`Ask ${agent.name} anything...`}
+              bind:value={input}
+              on:keydown={handleKeydown}
+            ></textarea>
+            <div class="mt-3 flex items-center justify-between">
+              <div class="flex gap-2 text-sm text-base-content/60">
+                <button class="btn btn-ghost btn-sm" type="button">➕ Attachment</button>
+                <button class="btn btn-ghost btn-sm" type="button">📎 Reference</button>
+              </div>
+              <button class="btn btn-primary" type="button" disabled={sending} on:click={sendMessage}>
+                {#if sending}
+                  <LoadingSpinner size="sm" text="Asking..." center={false} />
+                {:else}
+                  Send
+                {/if}
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Right sidebar -->
+      <aside class="hidden w-80 flex-shrink-0 flex-col gap-4 rounded-3xl bg-base-100 p-6 shadow-xl xl:flex">
+        <div>
+          <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">Agent details</p>
+          <h3 class="text-xl font-semibold">{agent.name}</h3>
+          <p class="text-sm text-base-content/70">{agent.description || 'No description available.'}</p>
+        </div>
+        <div class="space-y-3 rounded-2xl bg-base-200/70 p-4 text-sm">
+          <div class="flex items-center justify-between">
+            <span class="text-base-content/70">Owner</span>
+            <span class="font-semibold">{agent.owner || 'N/A'}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-base-content/70">Category</span>
+            <span class="font-semibold">{agent.category || 'General'}</span>
+          </div>
+        </div>
+
+        <div class="rounded-2xl border border-base-200 p-4 text-sm">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">Turn inspector</p>
+              <p class="text-sm text-base-content/70">Click any assistant bubble to inspect the payload.</p>
+            </div>
+            {#if selectedTurnId}
+              <span class="badge badge-outline badge-sm">{selectedTurnId.slice(0, 8)}…</span>
+            {/if}
+          </div>
+
+          <details class="mt-3" open={!!selectedTurn}>
+            <summary class="cursor-pointer font-semibold">Response payload</summary>
+            {#if selectedTurn}
+              <pre class="mt-3 max-h-80 overflow-auto rounded-2xl bg-base-300/40 p-3 text-xs">
+{JSON.stringify(selectedTurn, null, 2)}
+              </pre>
+            {:else}
+              <p class="mt-3 text-xs text-base-content/60">Select a turn to reveal the JSON response.</p>
+            {/if}
+          </details>
+
+          {#if storedTurnOrder.length > 0}
+            <div class="mt-4 space-y-1 text-xs">
+              <p class="font-semibold text-base-content">Stored turns</p>
+              {#each storedTurnOrder.slice().reverse() as turn}
+                <button
+                  type="button"
+                  class={`btn btn-ghost btn-xs w-full justify-between ${
+                    selectedTurnId === turn ? 'text-primary' : 'text-base-content/70'
+                  }`}
+                  on:click={() => {
+                    selectedTurnId = turn;
+                    selectedTurn = getTurn(agentId, turn);
+                  }}
+                >
+                  <span>{turn.slice(0, 8)}…</span>
+                  <span>Inspect</span>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </aside>
+    </div>
+  </div>
+{/if}

agentui/src/routes/talk/[agentId]/+page.ts

@@ -0,0 +1,7 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params }) => {
+  return {
+    agentId: params.agentId
+  };
+};

agentui/static/README.md

@@ -0,0 +1 @@
+## Static files

agentui/svelte.config.js

@@ -0,0 +1,11 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter()
+  }
+};
+
+export default config;

agentui/tailwind.config.ts

@@ -0,0 +1,53 @@
+import type { Config } from 'tailwindcss';
+import daisyui from 'daisyui';
+
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {}
+  },
+  plugins: [daisyui],
+  daisyui: {
+    themes: [
+      'light',
+      'dark',
+      'cupcake',
+      'bumblebee',
+      'emerald',
+      'corporate',
+      'synthwave',
+      'retro',
+      'cyberpunk',
+      'valentine',
+      'halloween',
+      'garden',
+      'forest',
+      'aqua',
+      'lofi',
+      'pastel',
+      'fantasy',
+      'wireframe',
+      'black',
+      'luxury',
+      'dracula',
+      'cmyk',
+      'autumn',
+      'business',
+      'acid',
+      'lemonade',
+      'night',
+      'coffee',
+      'winter',
+      'dim',
+      'nord',
+      'sunset'
+    ],
+    darkTheme: 'dark',
+    base: true,
+    styled: true,
+    utils: true,
+    prefix: '',
+    logs: true,
+    themeRoot: ':root'
+  }
+} satisfies Config;

agentui/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json"
+}

agentui/vite.config.ts

@@ -0,0 +1,10 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    sveltekit()
+  ]
+});