npm package: @spark-ai/design
Description: Basic components for the best experience of LLM
Latest version: 1.0.3

<div align="center"><a name="readme-top"></a>

<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg">

<h1>Spark Design</h1>
</div>
🎨 Spark Design is a front-end component library for LLM scenarios, used to build excellent LLM product experience, including a series of rich basic components and scenario components with LLM characteristics.
<br />
<br />

💬 Spark Chat: A free AI Chat framework for building an excellent LLM Chat experience similar to ChatGPT
🔀 Spark Flow: A free, open source workflow suite for building low-code, visual AI operation workflows

## ✨ Features
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> Based on Ant Design, compatible with the Ant Design ecosystem.
- 🛡 Written in TypeScript with predictable static types.
- 🎨 Multiple preset themes.
- ⚙️ Lightweight configuration, ready to use out of the box.
- ☀️ Supports light and dark modes.

## 📦 Install

```bash
npm install antd @ant-design/icons @spark-ai/design
```

## 🔨 Usage
```tsx
import {
  Button,
  ConfigProvider,
  purpleDarkTheme,
  purpleTheme,
} from '@spark-ai/design';
import { Flex } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import { useState } from 'react';

const App = () => {
  const [colorMode, setColorMode] = useState<'light' | 'dark'>('light');
  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;

  const prefix = 'consume';
  return (
    <ConfigProvider
      {...theme} // you can choose from purpleTheme, purpleDarkTheme, carbonTheme and carbonDarkTheme
      prefix={prefix} // prefix for Ant Design and Spark Design
      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // optional parameter, you can get it from https://www.iconfont.cn/
      locale={zhCN} // language pack from Ant Design
    >
      <Flex
        style={{
          backgroundColor: `var(--${prefix}-ant-color-bg-base)`,
          padding: '16px 24px',
        }}
        vertical
        gap={16}
      >
        <div style={{ color: `var(--${prefix}-ant-color-text-base)` }}>
          Hello World!
        </div>
        <Button
          type="primary"
          onClick={() => {
            setColorMode(colorMode === 'light' ? 'dark' : 'light');
          }}
        >
          {colorMode === 'light' ? 'dark' : 'light'} mode
        </Button>
      </Flex>
    </ConfigProvider>
  );
};

export default App;
```
## Built-in Themes
We provide four built-in themes:
<span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme
<span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme (for dark mode)
<span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme
<span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme (for dark mode)

## 🏗️ Coming Soon
Our website featuring design language, component documentation, theme switching, icon library and more is coming soon. Stay tuned!