# uncloseai.

Styleguide: Component Reference for uncloseai.js

## Styleguide

Visual reference for every component in the uncloseai.js embed system. This page documents the design tokens, vault onboarding flow, chat interface, and controls. The floating button at the bottom right is the live embed: click it to test the real modal.

## Color Palette

Core colors used across the modal system. The purple gradient anchors the header, send button, and vault submit. All other colors adapt to light and dark themes via CSS custom properties.

### Brand Gradient

Gradient
#667eea → #764ba2
Primary
#667eea
Secondary
#764ba2

### Interface Colors

Dark BG
#1a1a2e
Chat Dark
rgb(26,26,26)
Light BG
#f8f9fa
User Msg
#007bff
AI Msg Dark
#2d3748
Success
#28a745
Error
#dc3545
Border
#dee2e6

## Typography

### Brand Font

uncloseai.

`font-family: 'ChunkFiveRegular', monospace` — used for the h1 branding, vault gate title, and floating button.

### Body Text

Body text inherits from PicoCSS system font stack. Base size: `16px`, line-height: `1.6`.

Heading scale factor: `1.125` (major second). h1 through h6 computed via `calc(1rem * var(--heading-scale)^n)`.

### Code

Code blocks use `highlight.js` v11.10.0 with the `a11y-dark` theme. The modal auto-loads this stylesheet on any host page. Inline code uses PicoCSS monospace styling.

    // JavaScript: one-line installation
    const script = document.createElement("script");
    script.src = "https://uncloseai.com/uncloseai.js";
    script.type = "module";
    document.head.appendChild(script);

    # Python: streaming chat with uncloseai
    class UncloseAI:
        def __init__(self):
            self.endpoints = []

        def chat_stream(self, model, messages):
            for chunk in self._sse_stream(model, messages):
                yield chunk["choices"][0]["delta"]["content"]

    # Bash: test the TTS endpoint
    curl -X POST https://speech.ai.unturf.com/v1/audio/speech \
      -H "Content-Type: application/json" \
      -d '{"model":"tts-1","voice":"alloy","input":"Hello world"}'

## Vault Gate

The vault gate is the first thing every user sees when opening the modal. It encrypts chat history, API keys, and settings behind a password using AES-256 with a device-specific salt. Each website gets its own vault.

### New User (Create Vault)

Dark Theme
🔐
uncloseai.
Your chat history, API keys, and settings are encrypted with AES-256 using a password you choose and a device-specific salt. Each website has its own vault. Choose a password to get started.
Light Theme
🔐
uncloseai.
Your chat history, API keys, and settings are encrypted with AES-256 using a password you choose and a device-specific salt. Each website has its own vault. Choose a password to get started.

### Returning User (Unlock)

Dark Theme
🔓
uncloseai.
Your encrypted chat history, API keys, and settings are waiting. Enter your password to unlock this site's vault.
Light Theme
🔓
uncloseai.
Your encrypted chat history, API keys, and settings are waiting. Enter your password to unlock this site's vault.

### Error State

🔓
uncloseai.
Your encrypted chat history, API keys, and settings are waiting. Enter your password to unlock this site's vault.
That password didn't work. Please try again.

## Modal Headers

All three modals share the same header structure: gradient background, title, and action buttons. The purple gradient anchors the chat and TTS modals, while translate uses green.

### Chat Modal

Purple gradient with brand title, page context subtitle, settings gear, and close button.

uncloseai.
discussing: uncloseai.js Styleguide

### TTS Modal

Purple gradient with "Text to Speech" title and close button.

Text to Speech

### Translate Modal

Green gradient (`#4CAF50 → #45a049`) with "Translate" title and close button.

Translate

## Chat Messages

User messages are right-aligned with a blue background. Responses are left-aligned and themed for dark/light. Both use asymmetric border-radius for a conversational feel.

Dark Theme
What can you help me with on this page?
I can see this is the uncloseai.js styleguide. I can help you understand the component system, color palette, vault encryption, or any of the UI patterns documented here. What interests you?
Tell me about the vault encryption
Light Theme
What can you help me with on this page?
I can see this is the uncloseai.js styleguide. I can help you understand the component system, color palette, vault encryption, or any of the UI patterns documented here. What interests you?
Tell me about the vault encryption

### Message Actions

Each message has action buttons that appear on hover: copy as Markdown, copy as HTML, text-to-speech download, and delete.

## Controls

The control strip sits between the chat area and input field. Horizontally scrollable on mobile. Each button triggers a modal feature.

## Buttons

### Gradient Buttons

Used for primary actions: vault submit, send message, and modal CTA buttons.

### Control Buttons

Used for secondary actions in the control strip and settings panel.

### Floating Button

The entry point. Fixed position, bottom-right. Uses ChunkFive font. Colors adapt to the host page's theme.

uncloseai.

## Inputs

### Chat Input (Rounded)

The main message input. Rounded `border-radius: 24px`, auto-grows up to 120px height, focus ring uses the brand blue `#667eea`.

### Vault Input (Rectangular)

Used in the vault gate and settings forms. `border-radius: 10px` with a subtle focus ring.

## Live Demo

The uncloseai. floating button in the bottom-right corner of this page is the real embed. Click it to interact with the full modal, including vault creation, chat, TTS, translation, and settings. Everything documented above is rendered live inside that modal.

### Embed Code

    <!-- Add to any HTML page -->
    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

That single line loads the entire modal system: vault encryption, chat with Reverse RAG (live page content injected into every conversation), TTS, translation, file upload, and settings. Zero configuration required. See the full documentation for customization options.