open-index/open-npm huggingface dataset:
npm package: @janhq/interfaces
Description: Shared UI component library for Jan
Author: Jan service@jan.ai
Latest version: 0.0.3

# @janhq/interfaces

Shared UI component library for Jan applications.

## Installation

This package is part of the Jan workspace and is automatically available to all workspace packages.

Add it to your `package.json`:

```json
{
  "dependencies": {
    "@janhq/interfaces": "workspace:*"
  }
}
```

## Usage

Import components directly from the package:

```tsx
import { Button } from "@janhq/interfaces/button";
import { Dialog } from "@janhq/interfaces/dialog";
import { Input } from "@janhq/interfaces/input";

function MyComponent() {
  return <Button variant="default">Click me</Button>;
}
```

## Available Components

All components are built with:

- **React 19** - Latest React features
- **Radix UI** - Accessible component primitives
- **Tailwind CSS** - Utility-first styling
- **TypeScript** - Full type safety

### Core Components

- `avatar` - User avatar with fallback
- `badge` - Status badges and labels
- `button` - Interactive button with variants
- `card` - Content containers
- `dialog` - Modal dialogs
- `drawer` - Side drawers
- `dropdown-menu` - Dropdown menus
- `input` - Text input fields
- `label` - Form labels
- `select` - Dropdown select
- `separator` - Visual dividers
- `sheet` - Slide-out panels
- `sidebar` - Navigation sidebar
- `skeleton` - Loading placeholders
- `switch` - Toggle switches
- `textarea` - Multi-line text input
- `tooltip` - Contextual tooltips

### Composed Components

- `button-group` - Grouped buttons
- `collapsible` - Collapsible content
- `command` - Command palette
- `dropdrawer` - Combined dropdown/drawer
- `empty` - Empty state displays
- `field` - Form field wrapper
- `hover-card` - Hover popover
- `input-group` - Grouped inputs
- `popover` - Floating content

### Icons

- `svgs/discord` - Discord icon
- `svgs/github` - GitHub icon
- `svgs/google` - Google icon
- `svgs/jan` - Jan logo

### Utilities

```tsx
import { cn } from "@janhq/interfaces/lib";

// Merge Tailwind classes
const className = cn("base-class", condition && "conditional-class");
```

## Development

```bash
# Type check
pnpm type-check

# Lint
pnpm lint
```

## Notes

- All components use the `cn()` utility from `./lib.ts` for className merging
- Components are designed to work with Tailwind CSS
- Peer dependencies: React 19+
npm package: @janhq/streamdown
Description: A drop-in replacement for react-markdown, designed for AI-powered streaming.
Author: Hayden Bleasel
Latest version: 2.1.1

# Streamdown

A drop-in replacement for react-markdown, designed for AI-powered streaming.

[![npm version](https://img.shields.io/npm/v/streamdown)](https://www.npmjs.com/package/streamdown)

## Overview

Formatting Markdown is easy, but when you tokenize and stream it, new challenges arise. Streamdown is built specifically to handle the unique requirements of streaming Markdown content from AI models, providing seamless formatting even with incomplete or unterminated Markdown blocks.

Streamdown powers the [AI Elements Message](https://ai-sdk.dev/elements/components/message) component but can be installed as a standalone package for your own streaming needs.

## Features

- 🚀 **Drop-in replacement** for `react-markdown`
- 🔄 **Streaming-optimized** - Handles incomplete Markdown gracefully
- 🎨 **Unterminated block parsing** - Build with `remend` for better streaming quality
- 📊 **GitHub Flavored Markdown** - Tables, task lists, and strikethrough support
- 🔢 **Math rendering** - LaTeX equations via KaTeX
- 📈 **Mermaid diagrams** - Render Mermaid diagrams as code blocks with a button to render them
- 🎯 **Code syntax highlighting** - Beautiful code blocks with Shiki
- 🛡️ **Security-first** - Built with `rehype-harden` for safe rendering
- ⚡ **Performance optimized** - Memoized rendering for efficient updates

## Installation

```bash
npm i streamdown
```

Then, update your Tailwind `globals.css` to include the following.

```css
@source "../node_modules/streamdown/dist/*.js";
```

Make sure the path matches the location of the `node_modules` folder in your project. This will ensure that the Streamdown styles are applied to your project.

## Usage

Here's how you can use Streamdown in your React application with the AI SDK:

```tsx
import { useChat } from "@ai-sdk/react";
import { Streamdown } from "streamdown";
import { code } from "@janhq/streamdown-code";
import { mermaid } from "@janhq/streamdown-mermaid";
import { math } from "@janhq/streamdown-math";
import { cjk } from "@janhq/streamdown-cjk";
import "katex/dist/katex.min.css";

export default function Chat() {
  const { messages, status } = useChat();

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? (
              <Streamdown
                key={index}
                plugins={{ code, mermaid, math, cjk }}
                isAnimating={status === 'streaming'}
              >
                {part.text}
              </Streamdown>
            ) : null,
          )}
        </div>
      ))}
    </div>
  );
}
```

For more info, see the [documentation](https://streamdown.ai/docs).