> ## Documentation Index
> Fetch the complete documentation index at: https://docs.skye-bot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# In practice

> What a request looks like, and what comes back.

export const ChatDemo = ({turns = []}) => {
  const items = Array.isArray(turns) ? turns : [];
  const tones = {
    indigo: ["rgba(99, 102, 241, 0.16)", "rgba(56, 189, 248, 0.16)"],
    violet: ["rgba(139, 92, 246, 0.16)", "rgba(217, 70, 239, 0.14)"],
    emerald: ["rgba(16, 185, 129, 0.16)", "rgba(20, 184, 166, 0.14)"],
    amber: ["rgba(245, 158, 11, 0.18)", "rgba(249, 115, 22, 0.14)"],
    rose: ["rgba(244, 63, 94, 0.14)", "rgba(236, 72, 153, 0.14)"],
    slate: ["rgba(120, 120, 130, 0.14)", "rgba(90, 90, 100, 0.12)"]
  };
  const wave = [7, 12, 9, 16, 11, 6, 14, 10, 5];
  const formatSeconds = seconds => {
    if (typeof seconds !== "number" || !isFinite(seconds)) return "";
    const minutes = Math.floor(seconds / 60);
    const rest = Math.round(seconds % 60);
    return `${minutes}:${String(rest).padStart(2, "0")}`;
  };
  const playIcon = () => <svg viewBox="0 0 24 24" className="h-3.5 w-3.5 shrink-0" fill="currentColor" aria-hidden="true">
      <path d="M8 5v14l11-7z" />
    </svg>;
  const fileIcon = () => <svg viewBox="0 0 24 24" className="h-4 w-4 shrink-0" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M14 3v5h5" />
      <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z" />
    </svg>;
  const imageIcon = () => <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="4" width="18" height="16" rx="2" />
      <circle cx="9" cy="9" r="1.6" />
      <path d="m4 17 4.5-4.5L12 16l3-2.5L20 18" />
    </svg>;
  const renderTurn = turn => {
    const item = turn || ({});
    const from = item.from === "you" ? "you" : "sky";
    const kind = item.kind || "text";
    const align = {
      justifyContent: from === "you" ? "flex-end" : "flex-start"
    };
    const bubble = from === "you" ? {
      backgroundColor: "#5E60CE",
      color: "#ffffff"
    } : {
      backgroundColor: "rgba(128, 128, 136, 0.13)"
    };
    if (kind === "voice") {
      return <div className="flex flex-col gap-1.5">
          <div className="flex" style={align}>
            <div className="max-w-[88%] rounded-2xl px-3.5 py-2.5 text-[13.5px] leading-relaxed" style={bubble}>
              <span className="flex items-center gap-2.5">
                {playIcon()}
                <span className="flex h-4 items-center gap-[3px]">
                  {wave.map((height, bar) => <span key={bar} className="w-[2px] rounded-full bg-current opacity-70" style={{
        height: `${height}px`
      }} />)}
                </span>
                <span className="text-xs tabular-nums opacity-80">
                  {item.label || formatSeconds(item.seconds)}
                </span>
              </span>
            </div>
          </div>
          {item.text ? <div className="flex" style={align}>
              <p className="m-0 max-w-[88%] px-1 text-xs text-zinc-400 dark:text-zinc-500">
                {item.text}
              </p>
            </div> : null}
        </div>;
    }
    if (kind === "image") {
      const tone = tones[item.tone] || tones.indigo;
      return <div className="flex flex-col gap-1.5" style={{
        alignItems: from === "you" ? "flex-end" : "flex-start"
      }}>
          <div className="flex h-32 w-44 items-center justify-center rounded-2xl border border-black/5 text-zinc-400 dark:border-white/10 dark:text-zinc-500" style={{
        backgroundImage: `linear-gradient(135deg, ${tone[0]}, ${tone[1]})`
      }}>
            {imageIcon()}
          </div>
          {item.caption || item.label ? <span className="px-1 text-xs text-zinc-400 dark:text-zinc-500">
              {item.caption || item.label}
            </span> : null}
        </div>;
    }
    if (kind === "file") {
      return <div className="flex" style={align}>
          <div className="max-w-[88%] rounded-2xl px-3.5 py-2.5 text-[13.5px] leading-relaxed" style={bubble}>
            <span className="flex items-center gap-2.5">
              <span className="opacity-80">{fileIcon()}</span>
              <span className="flex flex-col leading-tight">
                <span className="font-medium">{item.name}</span>
                {item.meta ? <span className="text-xs opacity-70">{item.meta}</span> : null}
              </span>
            </span>
          </div>
        </div>;
    }
    if (kind === "code") {
      return <div className="flex" style={align}>
          <div className="max-w-[88%] rounded-2xl px-3.5 py-2.5 text-[13.5px] leading-relaxed" style={bubble}>
            <pre className="m-0 whitespace-pre-wrap break-words font-mono text-xs">
              {item.text}
            </pre>
          </div>
        </div>;
    }
    if (kind === "working") {
      return <div className="flex" style={{
        justifyContent: "flex-start"
      }}>
          <p className="m-0 flex items-center gap-2 px-1 py-0.5 text-xs text-zinc-400 dark:text-zinc-500">
            <span className="inline-block h-1.5 w-1.5 animate-pulse rounded-full" style={{
        backgroundColor: "#5E60CE"
      }} />
            <span>{item.text}</span>
          </p>
        </div>;
    }
    if (kind === "sources") {
      return <div className="flex" style={{
        justifyContent: "flex-start"
      }}>
          <div className="flex max-w-[88%] flex-col gap-1 px-1">
            {(item.links || []).map((link, index) => <a key={index} href={link.href} target="_blank" rel="noreferrer" className="text-xs underline underline-offset-2" style={{
        color: "#7c7ee0"
      }}>
                {link.label}
              </a>)}
          </div>
        </div>;
    }
    return <div className="flex" style={align}>
        <div className="max-w-[88%] rounded-2xl px-3.5 py-2.5 text-[13.5px] leading-relaxed" style={bubble}>
          <span className="whitespace-pre-line">{item.text}</span>
        </div>
      </div>;
  };
  return <div className="not-prose my-4 rounded-2xl border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-900/60 sm:p-5">
      <div className="flex flex-col gap-2.5">
        {items.map((turn, index) => <div key={index}>{renderTurn(turn)}</div>)}
      </div>
    </div>;
};

You do not need to phrase things carefully. Say what you want in your own words and Skye works out the rest. Below are real shapes of conversation. The prompts are short on purpose, and the transcripts are illustrative.

## A voice note becomes a plan

Send a rambling voice note; get back something you can keep.

<ChatDemo
  turns={[
{ from: "you", kind: "voice", text: "“Okay, this week: finish the deck, book the dentist, pick a gift for mom, and don’t forget the quarterly report.”", seconds: 13 },
{ from: "sky", text: "Here is a week you can keep:\n\nMon–Tue — finish the deck\nWed — quarterly report\nThu — dentist\nFri — gift for your mom" },
{ from: "sky", kind: "file", name: "week-plan.md", meta: "markdown · 2 KB" },
]}
/>

## A screenshot, read in seconds

Send a photo or a screenshot and ask the question you actually have.

<ChatDemo
  turns={[
{ from: "you", kind: "image", tone: "slate", caption: "receipt.jpg" },
{ from: "you", text: "What is the total here, and is anything off?" },
{ from: "sky", text: "The total is €148.20. Two rows are charged twice — rows 3 and 4 — so it should be €96.40. Want a short refund note?" },
]}
/>

## A picture, created and then adjusted

You can iterate the way you would with a designer.

<ChatDemo
  turns={[
{ from: "you", text: "Make a calm, minimal poster for my reading list. Muted colours, lots of space." },
{ from: "sky", kind: "image", tone: "violet", caption: "reading-list.png" },
{ from: "you", text: "Warmer, and add “Winter 2026”." },
{ from: "sky", kind: "image", tone: "amber", caption: "reading-list-v2.png" },
]}
/>

## A document, turned into decisions and risks

Long files become the few things you need to act on.

<ChatDemo
  turns={[
{ from: "you", kind: "file", name: "supplier-agreement.pdf", meta: "PDF · 24 pages" },
{ from: "you", text: "Summarise the decisions and flag the risks." },
{ from: "sky", text: "Decisions:\n• 12-month term, renews automatically\n• Payment net 30\n• Exclusivity only in the EU\n\nRisks:\n• Auto-renew with a 60-day notice window\n• The penalty clause is uncapped" },
{ from: "sky", kind: "file", name: "agreement-notes.md", meta: "markdown · 4 KB" },
]}
/>

## A question answered from the web

Fresh facts, with the sources attached.

<ChatDemo
  turns={[
{ from: "you", text: "What changed in the EU roaming rules this year?" },
{ from: "sky", kind: "working", text: "Searching the web…" },
{ from: "sky", text: "Two changes matter: the fair-use data cap rises, and calls between member states are priced like domestic ones." },
{ from: "sky", kind: "sources", links: [ { label: "ec.europa.eu — roaming", href: "https://ec.europa.eu/roaming" }, { label: "gsma.com — fair use", href: "https://www.gsma.com" } ] },
]}
/>

## A messy file, cleaned up

When a task needs real files or code, she uses the isolated workspace.

<ChatDemo
  turns={[
{ from: "you", kind: "file", name: "orders.csv", meta: "CSV · 4,812 rows" },
{ from: "you", text: "Clean this up and give me the top 10 by revenue as a spreadsheet." },
{ from: "sky", kind: "working", text: "Running Python in the workspace…" },
{ from: "sky", text: "Done. Removed 37 duplicate rows, normalised the dates, and ranked by revenue." },
{ from: "sky", kind: "file", name: "top-10-orders.xlsx", meta: "spreadsheet · 18 KB" },
]}
/>

## A preference she remembers

Tell her once; she applies it later without being asked.

<ChatDemo
  turns={[
{ from: "you", text: "Remember that I always want amounts in euros and dates as YYYY-MM-DD." },
{ from: "sky", text: "Saved." },
{ from: "you", text: "Draft a short invoice summary for March." },
{ from: "sky", text: "March 2026 — €1,240.00, due 2026-03-31. Two line items, one discount. Want it as a file?" },
]}
/>

## A task that comes back on its own

Set it once and it runs in this chat.

<ChatDemo
  turns={[
{ from: "you", text: "Every weekday at 8:00, send me a short plan for the day and anything I should not miss." },
{ from: "sky", text: "Done. It will arrive here at 8:00 on weekdays. Pause or edit it in Settings → Automations." },
{ from: "sky", kind: "working", text: "Scheduled run — Monday, 8:00" },
{ from: "sky", text: "Good morning. Today:\n\n1. Deck review at 11:00\n2. Reply to Anna\n3. Quarterly report is due Friday\n\nNothing else on your plate." },
]}
/>

These are illustrative, not exact transcripts. The words differ, but the shape is real. Ready to try it? [Open Skye](https://t.me/skye_ai_bot).