### Basic SlidingPanel Usage in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SlidingPanel.md

Demonstrates the fundamental setup of the SlidingPanel component in a React application. It shows how to manage the panel's open/close state and integrate its sub-components like Wrapper, Backdrop, Content, and Close. This example assumes a React environment with necessary imports.

```tsx
import { SlidingPanel } from "@orama/ui/components";
import React from "react";

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Panel</button>
      <SlidingPanel.Wrapper open={open} onClose={() => setOpen(false)}>
        <SlidingPanel.Backdrop className="bg-black/40" />
        <SlidingPanel.Content position="right">
          <header className="flex justify-between items-center">
            <h2>Panel Title</h2>
            <SlidingPanel.Close />
          </header>
          <div>
            <p>Your panel content goes here.</p>
          </div>
        </SlidingPanel.Content>
      </SlidingPanel.Wrapper>
    </>
  );
}
```

--------------------------------

### Install Dependencies with PNPM

Source: https://github.com/oramasearch/orama-ui/blob/main/README.md

Installs project dependencies using the PNPM package manager. This is a foundational step for setting up the project locally.

```sh
pnpm install
```

--------------------------------

### Complete Search Page Example with Orama UI React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Provides a comprehensive example of a search page using Orama UI React components. It features a toggle for switching between regular keyword search and NLP search, dynamic labels and placeholders, and handles both search types. Includes necessary imports and state management. This snippet is specific to React.

```tsx
import { SearchInput } from "@orama/ui-react";

function SearchPage() {
  const [searchMode, setSearchMode] = useState<"search" | "nlp">("search");

  const handleSearch = (term: string) => {
    console.log("Regular search:", term);
  };

  const handleNlpSearch = (query: string) => {
    console.log("NLP search:", query);
  };

  return (
    <div className="search-page">
      {/* Mode toggle */}
      <div className="search-mode-toggle">
        <button
          onClick={() => setSearchMode("search")}
          className={searchMode === "search" ? "active" : ""}
        >
          Keyword Search
        </button>
        <button
          onClick={() => setSearchMode("nlp")}
          className={searchMode === "nlp" ? "active" : ""}
        >
          AI Search
        </button>
      </div>

      {/* Search interface */}
      <SearchInput.Provider mode={searchMode}>
        <SearchInput.Form
          onSearch={handleSearch}
          onNlpSearch={handleNlpSearch}
          searchParams={{
            limit: 20,
            boost: { title: 2, content: 1 },
          }}
        >
          <SearchInput.Wrapper className="search-container">
            <SearchInput.Label htmlFor="main-search">
              {searchMode === "nlp" ? "Ask a question" : "Search our content"}
            </SearchInput.Label>

            <div className="search-input-group">
              <SearchInput.Input
                inputId="main-search"
                searchOnType={false}
                placeholder={
                  searchMode === "nlp"
                    ? "What would you like to know?"
                    : "Enter search terms..."
                }
                className="search-input"
              />

              <SearchInput.Submit className="search-submit">
                {searchMode === "nlp" ? "Ask AI" : "Search"}
              </SearchInput.Submit>
            </div>
          </SearchInput.Wrapper>
        </SearchInput.Form>
      </SearchInput.Provider>
    </div>
  );
}
```

--------------------------------

### Basic Modal Usage with Modal.Root

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/Modal.md

Demonstrates the basic implementation of the Modal component using `Modal.Root` and `Modal.Trigger` for opening the modal. It showcases how to structure modal content and a close button within the component hierarchy. This example assumes a standard setup where `Modal.Root` manages the state.

```tsx
import { Modal } from "@orama/ui/components";

// Basic usage with Modal.Trigger
function ExampleModal() {
  return (
    <Modal.Root>
      <Modal.Trigger>Open Modal</Modal.Trigger>
      <Modal.Wrapper>
        <Modal.Inner>
          <Modal.Close className="absolute top-4 right-4" />
          <Modal.Content>
            <h2>Modal Title</h2>
            <p>This is the modal content.</p>
          </Modal.Content>
        </Modal.Inner>
      </Modal.Wrapper>
    </Modal.Root>
  );
}
```

--------------------------------

### Complete Search Results UI Example (React)

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchResults.md

This example demonstrates a complete search results UI using Orama UI components, including handling loading, error, no results, and displaying results with item-specific actions.

```tsx
import { SearchResults } from "@orama/ui-react";

function SearchPage() {
  return (
    <SearchResults.Wrapper className="search-results">
      {/* Loading state */}
      <SearchResults.Loading>
        <div className="loading-spinner">Searching...</div>
      </SearchResults.Loading>

      {/* Error state */}
      <SearchResults.Error>
        {(error) => (
          <div className="error-message">
            <h3>Something went wrong</h3>
            <p>{error.message}</p>
          </div>
        )}
      </SearchResults.Error>

      {/* No results state */}
      <SearchResults.NoResults>
        {(term) => (
          <div className="no-results">
            <h3>No results found</h3>
            <p>No results found for "{term}". Try different keywords.</p>
          </div>
        )}
      </SearchResults.NoResults>

      {/* Results list */}
      <SearchResults.List className="results-list">
        {(result, index) => (
          <SearchResults.Item
            as="a"
            href={result.document.url}
            className="result-card"
          >
            <h4>{result.document.title}</h4>
            <p>{result.document.description}</p>
            <small>Relevance: {Math.round(result.score * 100)}%</small>
          </SearchResults.Item>
        )}
      </SearchResults.List>
    </SearchResults.Wrapper>
  );
}
```

--------------------------------

### ChatRoot Usage with Configuration and Callbacks

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/ChatRoot.md

Shows how to configure the ChatRoot component with default ask options (including throttle_delay) and provide callbacks for start, completion, and error events of ask operations.

```tsx
<ChatRoot
  client={orama}
  askOptions={{
    throttle_delay: 100,
    related: { enabled: true, size: 3 },
  }}
  onAskStart={(options) => console.log("Starting:", options)}
  onAskComplete={() => console.log("Completed")}
  onAskError={(error) => console.error("Error:", error)>
  <ChatComponent />
</ChatRoot>
```

--------------------------------

### Complete Orama UI Search Example in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchRoot.md

A comprehensive example of the SearchRoot component in React, demonstrating scoped search context with a namespace, custom search handler with analytics tracking, pre-populated search term, and rendering search results. The language is set to English.

```tsx
<SearchRoot
  client={orama}
  lang="en"
  namespace="help-center"
  initialState={{
    search: async (params) => {
      // Analytics tracking
      analytics.track("search_performed", {
        query: params.term,
        filters: params.filterBy,
        namespace: "help-center",
        language: "en",
      });

      // Custom search logic
      console.log("Searching with:", params);
    },
    searchTerm: "Getting started",
    selectedFacet: "All",
    count: 0,
  }}>
  <SearchInput.Wrapper>
    <SearchInput.Label htmlFor="search">Search Documentation</SearchInput.Label>
    <SearchInput.Input inputId="search" placeholder="Search..." />
  </SearchInput.Wrapper>

  <SearchResults.Wrapper>
    <SearchResults.Hit>
      {(hit) => (
        <div>
          <h3>{hit.document.title}</h3>
          <p>{hit.document.content}</p>
        </div>
      )}
    </SearchResults.Hit>
  </SearchResults.Wrapper>
</SearchRoot>
```

--------------------------------

### Install Orama UI Packages

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/README.md

Installs the necessary Orama UI and Orama core packages using npm, pnpm, or yarn. These packages are essential for using Orama's search and chat functionalities within a React application.

```bash
npm install @orama/ui @orama/core
# or
pnpm install @orama/ui @orama/core
# or
yarn add @orama/ui @orama/core
```

--------------------------------

### Run Development Server (Bash)

Source: https://github.com/oramasearch/orama-ui/blob/main/apps/docs/README.md

Starts the local development server for the Orama UI project. This command is typically run from the project's root directory. It allows for live preview and auto-updates as code changes.

```bash
yarn dev
```

--------------------------------

### SearchInput.Submit Component Usage Examples

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Provides examples of using the SearchInput.Submit component for triggering search actions. It covers basic usage, including an icon, and applying custom styling and disabling the button.

```tsx
<!-- Basic submit button -->
<SearchInput.Submit className="search-button">
  Search
</SearchInput.Submit>

<!-- With icon -->
<SearchInput.Submit>
  <SearchIcon />
  Search
</SearchInput.Submit>

<!-- Custom styling -->
<SearchInput.Submit
  className="btn btn-primary"
  disabled={!hasQuery}
>
  Find Results
</SearchInput.Submit>
```

--------------------------------

### SearchInput.Label Component Usage Examples

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Illustrates how to use the SearchInput.Label component for accessibility and semantic structure. Examples show basic label usage, rendering as a heading, and applying custom styling.

```tsx
<!-- Basic label -->
<SearchInput.Label htmlFor="search-input">
  Search Products
</SearchInput.Label>

<!-- As a heading -->
<SearchInput.Label as="h2" className="search-heading">
  Find What You Need
</SearchInput.Label>

<!-- With custom styling -->
<SearchInput.Label
  htmlFor="search"
  className="visually-hidden"
>
  Search
</SearchInput.Label>
```

--------------------------------

### Basic ChatRoot Usage

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/ChatRoot.md

Demonstrates the basic setup of the ChatRoot component, wrapping a ChatComponent and providing the Orama client instance.

```tsx
import { ChatRoot } from "@orama/ui/components";
import { OramaCloud } from "@orama/core";

const orama = new OramaCloud({
  projectId: "your-project-id",
  apiKey: "your-api-key",
});

function App() {
  return (
    <ChatRoot client={orama}>
      <ChatComponent />
    </ChatRoot>
  );
}
```

--------------------------------

### RecentSearches.Provider Integration Example (TypeScript)

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/RecentSearches.md

Demonstrates how to integrate RecentSearches.Provider with SearchRoot to manage separate recent search histories based on namespace. This ensures distinct search contexts have their own isolated search history.

```tsx
import { SearchRoot, RecentSearches } from "@/components";

// Different namespaces create separate search histories
function ProductSearch() {
  return (
    <SearchRoot namespace="products">
      <RecentSearches.Provider>
        {/* This will save searches under "recent_searches_products" */}
        <RecentSearches.List>
          {(term) => (
            <RecentSearches.Item term={term}>{term}</RecentSearches.Item>
          )}
        </RecentSearches.List>
      </RecentSearches.Provider>
    </SearchRoot>
  );
}

function DocumentSearch() {
  return (
    <SearchRoot namespace="documents">
      <RecentSearches.Provider>
        {/* This will save searches under "recent_searches_documents" */}
        <RecentSearches.List>
          {(term) => (
            <RecentSearches.Item term={term}>{term}</RecentSearches.Item>
          )}
        </RecentSearches.List>
      </RecentSearches.Provider>
    </SearchRoot>
  );
}
```

--------------------------------

### React: Initialize and Use useClipboard Hook

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/hooks/useClipboard.md

Provides a concise example of initializing and using the 'useClipboard' hook to copy a string. It shows the direct call to 'copyToClipboard' and the potential for 'copied' and 'error' states. This snippet is a simplified illustration of the hook's core functionality.

```tsx
const { copyToClipboard, copied, error } = useClipboard();
copyToClipboard("Hello world!");

```

--------------------------------

### SearchRoot with Language Support

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchRoot.md

This example demonstrates how to enable language-specific search behavior by providing the 'lang' prop to the SearchRoot component. This example specifically sets the language to 'italian'.

```tsx
<SearchRoot client={orama} lang="italian">
  <SearchInput.Wrapper>
    <SearchInput.Label htmlFor="search">Cerca...</SearchInput.Label>
    <SearchInput.Input inputId="search" />
  </SearchInput.Wrapper>
</SearchRoot>
```

--------------------------------

### React Provider for SearchContext with Custom Initialization

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/context/SearchContext.md

Example of setting up a custom provider for SearchContext and SearchDispatchContext in a React application. It initializes the Orama client and uses React's useReducer hook to manage the search state.

```tsx
import {
  SearchContext,
  SearchDispatchContext,
  useSearchContext,
  useSearchDispatch,
  searchReducer,
  initialSearchState,
} from "@orama/ui/contexts";
import { OramaCloud } from "@orama/core";

const orama = new OramaCloud({
  projectId: "your-project-id",
  apiKey: "your-api-key",
});

function SearchProvider({ children }) {
  const [state, dispatch] = React.useReducer(searchReducer, {
    ...initialSearchState,
    client: orama,
  });

  return (
    <SearchContext value={state}>
      <SearchDispatchContext value={dispatch}>{children}</SearchDispatchContext>
    </SearchContext>
  );
}
```

--------------------------------

### Basic SearchRoot Usage

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchRoot.md

This example shows the basic integration of the SearchRoot component, wrapping a SearchInput.Wrapper to provide Orama search context to the search input elements.

```tsx
<SearchRoot client={orama}>
  <SearchInput.Wrapper>
    <SearchInput.Label htmlFor="search">Search</SearchInput.Label>
    <SearchInput.Input inputId="search" />
  </SearchInput.Wrapper>
  {/* Other search-related components */}
</SearchRoot>
```

--------------------------------

### Basic Usage of RecentSearches Component

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/RecentSearches.md

Demonstrates the fundamental usage of the RecentSearches component, including setting up the provider, rendering a list of recent searches, and a clear button. This example showcases the basic integration flow for displaying and managing recent search history.

```tsx
import { RecentSearches } from "@/components/RecentSearches";

function SearchInterface() {
  return (
    <RecentSearches.Provider
      onSearch={(query) => console.log("Searched:", query)}
      onClear={() => console.log("Cleared recent searches")}
    >
      <RecentSearches.List className="recent-list">
        {(term, index) => (
          <RecentSearches.Item term={term} className="recent-item">
            {term}
          </RecentSearches.Item>
        )}
      </RecentSearches.List>

      <RecentSearches.Clear className="clear-btn">
        Clear All
      </RecentSearches.Clear>
    </RecentSearches.Provider>
  );
}
```

--------------------------------

### Run Development Servers with PNPM

Source: https://github.com/oramasearch/orama-ui/blob/main/README.md

Starts all applications within the monorepo using PNPM. This command is used to run the development servers for the Next.js apps and other services.

```sh
pnpm dev
```

--------------------------------

### RecentSearches.List Styling Example (TypeScript)

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/RecentSearches.md

Shows how to apply custom CSS classes to the RecentSearches.List and its items for tailored styling. This allows for flexible design integration using utility-first CSS frameworks like Tailwind CSS.

```tsx
<RecentSearches.List
  className="flex flex-wrap gap-2"
  itemClassName="inline-block"
>
  {(term) => (
    <RecentSearches.Item
      term={term}
      className="px-3 py-1 bg-blue-100 rounded-full text-sm hover:bg-blue-200 transition-colors"
    >
      {term}
    </RecentSearches.Item>
  )}
</RecentSearches.List>
```

--------------------------------

### SearchInput.Input Component Usage Examples

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Demonstrates the various ways to use the SearchInput.Input component, including default search-on-type behavior, disabling search-on-type for form submission, and configuring Orama search parameters.

```tsx
<!-- Search on type (default behavior) -->
<SearchInput.Input
  placeholder="Type to search..."
  onValueChange={(value) => console.log('Typed:', value)}
/>

<!-- Search on submit only -->
<SearchInput.Input
  searchOnType={false}
  placeholder="Enter search term..."
  ariaLabel="Search products"
/>

<!-- With search parameters -->
<SearchInput.Input
  searchParams={{
    limit: 20,
    boost: { title: 2, content: 1 },
    filterBy: [{ category: 'electronics' }]
  }}
/>
```

--------------------------------

### Chat Interactions Wrapper Usage Example (React)

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/ChatInteractions.md

A comprehensive example demonstrating the usage of the `ChatInteractions.Wrapper` component. This wrapper likely manages chat state and provides interaction data to its children, including user prompts, assistant messages, and action buttons like copy message.

```tsx
import { ChatInteractions } from "./ChatInteractions";

<ChatInteractions.Wrapper>
  {(interaction) => (
    <>
      <ChatInteractions.UserPrompt>
        {interaction.query}
      </ChatInteractions.UserPrompt>
      <ChatInteractions.AssistantMessage>
        {interaction.response}
      </ChatInteractions.AssistantMessage>
      <ChatInteractions.UserActions>
        <ChatInteractions.CopyMessage interaction={interaction} />
      </ChatInteractions.UserActions>
    </>
  )}
</ChatInteractions.Wrapper>
```

--------------------------------

### Basic Tabs Component Usage in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/Tabs.md

Demonstrates the fundamental usage of the Tabs component, including setting up a wrapper, tab list with buttons, and corresponding content panels. This example shows how to create a simple static tab interface.

```tsx
import { Tabs } from "@orama/ui";

<Tabs.Wrapper defaultTab="tab1" orientation="horizontal">
  <Tabs.List>
    <Tabs.Button tabId="tab1">Tab 1</Tabs.Button>
    <Tabs.Button tabId="tab2">Tab 2</Tabs.Button>
  </Tabs.List>
  <Tabs.Panel tabId="tab1">Content for Tab 1</Tabs.Panel>
  <Tabs.Panel tabId="tab2">Content for Tab 2</Tabs.Panel>
</Tabs.Wrapper>
```

--------------------------------

### SearchInput Usage Pattern: Real-time Search

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Example of implementing real-time search functionality using SearchInput.Wrapper, SearchInput.Label, and SearchInput.Input with `searchOnType={true}`.

```tsx
<SearchInput.Wrapper className="realtime-search">
  <SearchInput.Label htmlFor="realtime">Quick Search</SearchInput.Label>
  <SearchInput.Input
    inputId="realtime"
    searchOnType={true}
    placeholder="Results appear as you type..."
  />
</SearchInput.Wrapper>
```

--------------------------------

### Basic PromptTextArea Usage in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/PromptTextArea.md

Demonstrates how to import and use the PromptTextArea component's wrapper, field, and button in a React application. This setup allows for a basic chat input experience.

```tsx
import { PromptTextArea } from "@orama/ui";

<PromptTextArea.Wrapper>
  <PromptTextArea.Field
    placeholder="Type your message..."
    maxLength={500}
    rows={4}
    disabled={false}
  />
  <PromptTextArea.Button>Send</PromptTextArea.Button>
</PromptTextArea.Wrapper>
```

--------------------------------

### Advanced Usage of RecentSearches Component

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/RecentSearches.md

Illustrates advanced configuration of the RecentSearches component, including custom search handlers, styling for the list and items, and additional search parameters. This example highlights how to tailor the component's behavior and appearance for complex search scenarios.

```tsx
import { RecentSearches } from "@/components/RecentSearches";

function AdvancedSearchInterface() {
  const handleSearch = (query: string) => {
    // Additional logic
    doSomething(query);
  };

  return (
    <RecentSearches.Provider onSearch={handleSearch}>
      <div className="search-history">
        <h3>Recent Searches</h3>

        <RecentSearches.List
          className="grid grid-cols-2 gap-2"
          itemClassName="recent-search-item"
        >
          {(term, index) => (
            <RecentSearches.Item
              term={term}
              mode="nlp"
              searchParams={{ limit: 20, offset: 0 }}
              className="px-3 py-2 bg-gray-100 rounded hover:bg-gray-200"
            >
              <span className="text-sm">{term}</span>
              <span className="text-xs text-gray-500">#{index + 1}</span>
            </RecentSearches.Item>
          )}
        </RecentSearches.List>

        <RecentSearches.Clear className="mt-4 text-red-500 underline">
          Clear History
        </RecentSearches.Clear>
      </div>
    </RecentSearches.Provider>
  );
}
```

--------------------------------

### Basic FacetTabs Usage in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/FacetTabs.md

This example shows the basic implementation of the FacetTabs component in a React application. It includes importing the necessary components from '@orama/ui/components' and structuring the tabs with a wrapper, list, and individual items, utilizing a render function to display facet information.

```tsx
import { FacetTabs } from "@orama/ui/components";

function Example() {
  return (
    <FacetTabs.Wrapper className="facet-tabs">
      <FacetTabs.List
        className="facet-tabs-list"
        itemClassName="facet-tab-item"
      >
        {(group, isSelected) => (
          <FacetTabs.Item
            group={group}
            filterBy="category"
            isSelected={isSelected}
            className={isSelected ? "active" : ""}
          >
            {group.name} ({group.count})
          </FacetTabs.Item>
        )}
      </FacetTabs.List>
    </FacetTabs.Wrapper>
  );
}
```

--------------------------------

### Using ChatRoot Context and useChat Hook in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/hooks/useChat.md

Demonstrates how `ChatRoot` provides base configuration that is inherited by the `useChat` hook. It shows how to override context defaults at the hook level and further refine options during an `ask` call. The example illustrates the priority order of configuration merging.

```tsx
// ChatRoot provides base configuration
<ChatRoot
  client={orama}
  askOptions={{ throttle_delay: 50, related: { enabled: true } }}
  onAskError={(error) => console.error("Global error:", error)>
  <ChatComponent />
</ChatRoot>;

function ChatComponent() {
  // Inherits ChatRoot configuration, can override per operation
  const { ask } = useChat(
    { throttle_delay: 100 }, // Hook defaults override context
    { onAskComplete: () => console.log("Local completion handler") },
  );

  const handleAsk = async () => {
    // Priority: ChatRoot < Hook defaults < Call options
    await ask({
      query: "Question",
      throttle_delay: 200, // Highest priority
    });
  };
}
```

--------------------------------

### Import and Use Orama UI Components

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/README.md

Demonstrates importing core search components and their associated CSS from the Orama UI library. It shows how to wrap the application with `SearchRoot` and compose a basic search interface using `SearchInput` and `SearchResults`.

```tsx
import {
  SearchRoot,
  SearchInput,
  SearchResults,
} from "@orama/ui/components";

import "@orama/ui/styles.css";

<SearchRoot client={orama}>
  <div className="search-container">
    <SearchInput.Input placeholder="Search for anything..." />
    <SearchResults.Wrapper>
      <SearchResults.List>
        {(result) => (
          <SearchResults.Item>
            <h3>{result.title}</h3>
            <p>{result.description}</p>
          </SearchResults.Item>
        )}
      </SearchResults.List>
    </SearchResults.Wrapper>
  </div>
</SearchRoot>
```

--------------------------------

### Accessible PromptTextArea Example

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/PromptTextArea.md

An example demonstrating the use of accessibility attributes like `aria-label` for the PromptTextArea field and its associated button, ensuring better usability for screen reader users.

```tsx
<PromptTextArea.Wrapper>
  <PromptTextArea.Field aria-label="Chat prompt" />
  <PromptTextArea.Button>Send</PromptTextArea.Button>
</PromptTextArea.Wrapper>
```

--------------------------------

### Initialize Orama Client

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchRoot.md

This snippet demonstrates how to initialize an OramaCloud client instance, which is required for the SearchRoot component. It takes project and API keys as arguments.

```tsx
import { SearchRoot, SearchInput } from "@orama/ui/components";
import { OramaCloud } from "@orama/core";

const orama = new OramaCloud({
  projectId: "your-project-id",
  apiKey: "your-api-key",
});
```

--------------------------------

### Multiple Search Contexts with Namespaces in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchRoot.md

Illustrates how to set up multiple, independent search contexts within the same application by utilizing different namespaces for product and documentation searches. Each context can have its own language configuration.

```tsx
{
  /* Product search context */
}
<SearchRoot client={orama} namespace="products" lang="en">
  <ProductSearch />
</SearchRoot>;

{
  /* Documentation search context */
}
<SearchRoot client={orama} namespace="docs" lang="en">
  <DocumentationSearch />
</SearchRoot>;
```

--------------------------------

### FacetTabs Example with Different Filter

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/FacetTabs.md

This is an alternative example of the FacetTabs component, demonstrating its flexibility. It shows how to use FacetTabs.Item with a different filter property ('type' instead of 'category') and displays the group name and count as the tab label.

```tsx
<FacetTabs.Wrapper>
  <FacetTabs.List>
    {(group, isSelected) => (
      <FacetTabs.Item group={group} filterBy="type" isSelected={isSelected}>
        {group.name} ({group.count})
      </FacetTabs.Item>
    )}
  </FacetTabs.List>
</FacetTabs.Wrapper>
```

--------------------------------

### Configuring SearchInput Provider Context in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Demonstrates setting up the SearchInput.Provider to manage search mode and local input state. It shows how to wrap child components, enabling NLP search mode and defining a callback for NLP search submissions. This provider is optional but enhances functionality for specific scenarios like `searchOnType={false}`.

```tsx
<SearchInput.Provider mode="nlp">
  <SearchInput.Form onNlpSearch={(term) => console.log("NLP:", term)>
    <SearchInput.Input searchOnType={false} />
    <SearchInput.Submit>Search</SearchInput.Submit>
  </SearchInput.Form>
</SearchInput.Provider>
```

--------------------------------

### Chat UI with Smooth Scroll using useScrollableContainer

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/hooks/useScrollableContainer.md

Shows an example of integrating `useScrollableContainer` with `@orama/ui/components.ChatInteractions` to create a chat interface with smooth scroll-to-bottom behavior. This example automatically scrolls to the bottom when new messages arrive and recalculates button visibility on scroll or streaming events. It requires React, `@orama/ui/hooks`, and `@orama/ui/components`.

```tsx
import React, { useEffect } from "react";
import { useScrollableContainer } from "@orama/ui/hooks";
import { ChatInteractions } from "@orama/ui/components";

function ChatBox() {
  const {
    containerRef,
    showGoToBottomButton,
    scrollToBottom,
    recalculateGoToBottomButton,
  } = useScrollableContainer();

  // Automatically scrolls to the bottom when new messages arrive
  useEffect(() => {
    if (interactions.length > 0) {
      scrollToBottom({ animated: true });
    }
    recalculateGoToBottomButton();
  }, [interactions, scrollToBottom, recalculateGoToBottomButton]);

  return (
    <div className="flex">
      <div>Chatbox header...</div>
      <div ref={containerRef} className="flex-1 overflow-y-auto">
        <ChatInteractions.Wrapper
          onScroll={recalculateGoToBottomButton}
          onStreaming={recalculateGoToBottomButton}
          onNewInteraction={() => {
            scrollToBottom({ animated: true });
          }}
        >
          {(interaction) => (
            <div className="mb-2">
              <ChatInteractions.AssistantMessage>
                {interaction.response}
              </ChatInteractions.AssistantMessage>
            </div>
          )}
        </ChatInteractions.Wrapper>
      </div>
      <div>Chatbox footer...</div>
    </div>
  );
}
```

--------------------------------

### Pre-populating Search State in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchRoot.md

Demonstrates how to pre-populate the search state using the `initialState` prop in the SearchRoot component. This includes setting the search term, selected facet, and initial results for a French language search context.

```tsx
<SearchRoot
  client={orama}
  lang="fr"
  namespace="products"
  initialState={{
    searchTerm: "React components",
    selectedFacet: "documentation",
    results: [
      // Pre-loaded search results
      {
        id: "1",
        document: { title: "Getting Started", content: "..." },
        score: 0.95,
      },
    ],
    count: 42,
  }}>
  {/* Search UI starts with pre-populated data */}
  <SearchInput.Wrapper>
    <SearchInput.Input inputId="search" />
  </SearchInput.Wrapper>
  <SearchResults />
</SearchRoot>
```

--------------------------------

### Set Up Orama Cloud Client

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/README.md

Initializes the Orama Cloud JavaScript client using your project ID and API key. This client is required to connect your React application to your Orama Cloud project for search and data retrieval.

```tsx
import { OramaCloud } from "@orama/core";

const orama = new OramaCloud({
  projectId: "your-project-id",
  apiKey: "your-api-key",
});
```

--------------------------------

### TypeScript Interface for UseChatCallbacks

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/hooks/useChat.md

Defines the structure for optional callbacks that can be provided to the useChat hook to react to different stages of the ask operation (start, completion, error).

```typescript
interface UseChatCallbacks {
  onAskStart?: (options: ExtendedAnswerConfig) => void;
  onAskComplete?: () => void;
  onAskError?: (error: Error) => void;
}
```

--------------------------------

### Configure Search Mode with Provider (React)

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchResults.md

The SearchResults.Provider component allows setting the search mode ('search' or 'nlp') for its descendants. This example shows how to set the mode to 'nlp'.

```tsx
import { SearchResults } from "@orama/ui-react";

<SearchResults.Provider mode="nlp">
  <SearchResults.List>
    {(result) => <div>{result.document.title}</div>}
  </SearchResults.List>
</SearchResults.Provider>
```

--------------------------------

### ChatRoot Usage with Pre-populated State

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/ChatRoot.md

Illustrates how to initialize the ChatRoot component with a pre-populated state, including previous interactions and an initial user prompt.

```tsx
<ChatRoot
  client={orama}
  initialState={{
    interactions: [
      {
        query: "Welcome message",
        response: { text: "Hi there! I'm here to help you." },
        interactionId: "welcome-1",
      },
    ],
    userPrompt: "Type your question here...",
  }}>
  <ChatComponent />
</ChatRoot>
```

--------------------------------

### Configuring Search Modes with SearchInput.Provider

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Demonstrates how to set the search mode ('search' or 'nlp') using the SearchInput.Provider component. Examples show a standard Orama search and an NLP-based search.

```tsx
<!-- Regular search mode -->
<SearchInput.Provider mode="search">
  <SearchInput.Form onSearch={(term) => console.log('Search:', term)}>
    <SearchInput.Input />
    <SearchInput.Submit>Search</SearchInput.Submit>
  </SearchInput.Form>
</SearchInput.Provider>

<!-- NLP search mode -->
<SearchInput.Provider mode="nlp">
  <SearchInput.Form onNlpSearch={(term) => console.log('NLP:', term)}>
    <SearchInput.Input placeholder="Ask a question..." />
    <SearchInput.Submit>Ask AI</SearchInput.Submit>
  </SearchInput.Form>
</SearchInput.Provider>
```

--------------------------------

### Configure Search Mode with Wrapper (React)

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchResults.md

The SearchResults.Wrapper component can also be used to set the search mode ('search' or 'nlp') for its child components. This example demonstrates setting the mode to 'nlp'.

```tsx
import { SearchResults } from "@orama/ui-react";

<SearchResults.Wrapper mode="nlp">
  <SearchResults.List>
    {(result) => <div>{result.document.title}</div>}
  </SearchResults.List>
</SearchResults.Wrapper>
```

--------------------------------

### React Hook Usage: useRecentSearches

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/hooks/useRecentSearches.md

Example of how to use the useRecentSearches hook in a React component to manage recent search queries. It demonstrates initializing the hook, handling search input, and displaying recent searches.

```tsx
import { useRecentSearches } from "@/hooks/useRecentSearches";

function SearchComponent() {
  const { recentSearches, addSearch, clearSearches } = useRecentSearches(
    "english",
    "products",
  );

  const handleSearch = (query: string) => {
    // Add search immediately
    addSearch()(query);

    // Or add search with debounce
    addSearch(300)(query);
  };

  return (
    <div>
      <input onChange={(e) => handleSearch(e.target.value)} />

      <div>
        <h3>Recent Searches</h3>
        {recentSearches.map((search) => (
          <div key={search.term}>
            {search.term} - {new Date(search.timestamp).toLocaleString()}
          </div>
        ))}
        <button onClick={clearSearches}>Clear All</button>
      </div>
    </div>
  );
}
```

--------------------------------

### Create API Routes (TypeScript)

Source: https://github.com/oramasearch/orama-ui/blob/main/apps/docs/README.md

Demonstrates how to create API routes within a Next.js application. API routes are defined within the `app/api/` directory using `route.ts` files. Subfolders define specific endpoints.

```typescript
// Example: app/api/hello/route.ts
export async function GET(request: Request) {
  return new Response('Hello, Next.js!')
}
```

--------------------------------

### Set Global Callbacks for Ask Operations in ChatRoot

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/ChatRoot.md

The `ChatRoot` component provides global callback handlers for ask operations to manage different stages of the process. `onAskStart` is called when an ask operation begins, `onAskComplete` when it finishes successfully, and `onAskError` when an error occurs. These callbacks are essential for tracking analytics, managing loading states, and handling errors.

```tsx
<ChatRoot
  client={orama}
  onAskStart={(options) => {
    console.log('Ask started with options:', options)
    // Track analytics, show loading states, etc.
  }}
  onAskComplete={() => {
    console.log('Ask completed successfully')
    // Hide loading states, track success, etc.
  }}
  onAskError={(error) => {
    console.error('Ask failed:', error)
    // Show error notifications, track failures, etc.
  }}
>
```

--------------------------------

### FacetTabs Component: Faceted Search Example

Source: https://context7.com/oramasearch/orama-ui/llms.txt

Implements a tab-based filtering system for search results using the FacetTabs component. It allows users to filter results by categories and displays them using SearchResults.

```tsx
import { SearchRoot, SearchInput, FacetTabs, SearchResults } from "@orama/ui/components";
import { OramaCloud } from "@orama/core";

const orama = new OramaCloud({
  projectId: "your-project-id",
  apiKey: "your-api-key",
});

function FacetedSearch() {
  return (
    <SearchRoot
      client={orama}
      searchParams={{
        limit: 20,
        groupBy: { properties: ["category"], maxGroups: 10 }
      }}
    >
      <SearchInput.Input placeholder="Search with filters..." />

      <FacetTabs.Wrapper>
        <FacetTabs.List>
          {(group, isSelected) => (
            <FacetTabs.Item
              group={group}
              isSelected={isSelected}
              filterBy="category"
              className={isSelected ? "active-tab" : "tab"}
            >
              {group.name} ({group.count})
            </FacetTabs.Item>
          )}
        </FacetTabs.List>
      </FacetTabs.Wrapper>

      <SearchResults.Wrapper>
        <SearchResults.List>
          {(result) => (
            <div>
              <h4>{result.document.title}</h4>
              <span className="category">{result.document.category}</span>
            </div>
          )}
        </SearchResults.List>
      </SearchResults.Wrapper>
    </SearchRoot>
  );
}
```

--------------------------------

### Implementing NLP Search Form Submission in React

Source: https://github.com/oramasearch/orama-ui/blob/main/packages/ui/docs/components/SearchInput.md

Demonstrates configuring the SearchInput.Form for Natural Language Processing (NLP) searches. This example utilizes the SearchInput.Provider to set the mode to 'nlp', defines specific search parameters, and provides an `onNlpSearch` callback to handle the NLP query and its results.

```tsx
<SearchInput.Provider mode="nlp">
  <SearchInput.Form
    onNlpSearch={(term, params) => console.log('NLP search:', term)}
    searchParams={{ limit: 20, boost: { title: 2 } }}>
    <SearchInput.Input searchOnType={false} />
    <SearchInput.Submit>Ask AI</SearchInput.Submit>
  </SearchInput.Form>
</SearchInput.Provider>
```

--------------------------------

### SearchInput Component: Live Search Example

Source: https://context7.com/oramasearch/orama-ui/llms.txt

Implements a search-as-you-type input field using the SearchInput component. It connects to Orama Cloud for real-time search suggestions and supports advanced search parameters.

```tsx
import { SearchRoot, SearchInput } from "@orama/ui/components";
import { OramaCloud } from "@orama/core";

const orama = new OramaCloud({
  projectId: "your-project-id",
  apiKey: "your-api-key",
});

// Search-as-you-type implementation
function LiveSearch() {
  return (
    <SearchRoot client={orama}>
      <SearchInput.Wrapper>
        <SearchInput.Label htmlFor="search">Search</SearchInput.Label>
        <SearchInput.Input
          inputId="search"
          placeholder="Type to search..."
          searchOnType={true}
          searchParams={{
            limit: 15,
            groupBy: { properties: ["type"] },
            boost: { title: 2.0, description: 1.5 }
          }}
        />
      </SearchInput.Wrapper>
    </SearchRoot>
  );
}
```