• Stars
    star
    710
  • Rank 63,751 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 1 year ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿค– Components Library for Quickly Building LLM Chat Interfaces.

ProChat

Components Library for Quickly Building LLM Chat Interfaces.



English ยท ็ฎ€ไฝ“ไธญๆ–‡ ยท Changelog . Report Bug ยท Request Feature

Table of contents

TOC

๐Ÿ“ฆ Installation

Important

This package is ESM only.

To install @ant-design/pro-chat, run the following command:

$ pnpm install @ant-design/pro-chat

This project is based on antd antd-style, so if you have not installed these two dependencies, please install them.

$ pnpm install antd-style // peerDependencies
$ pnpm install antd // peerDependencies

Compile with Next.js

Note

By work correct with Next.js SSR, add transpilePackages: ['@ant-design/pro-chat'] to next.config.js. For example:

const nextConfig = {
  transpilePackages: [
    '@ant-design/pro-chat',
    '@ant-design/pro-editor',
    'react-intersection-observer',
  ],
};

Note

If you are using a new version of NextJs (higher than 14), you no longer need to configure transpilePackages to run in NextJs.


๐Ÿ”จ Usage

import { ProChat } from '@ant-design/pro-chat';

export default () => (
  <ProChat
    request={async (messages) => {
      // Send a request with Message as the parameter
      return Message; // Supports both streaming and non-streaming
    }}
  />
);

โœจ Features

Note

ProChat focuses on quickly setting up a large language model chat dialogue framework. It aims to empower developers to easily create rich, dynamic, and intuitive chat interfaces.

Framework and Solutions for Chat Interface Components:

  • ๐Ÿ”„ Automatic Chat Caching: Maintains conversation continuity without any extra effort, ensuring a smooth user experience.
  • ๐Ÿ’ฌ Streamlined Conversations: Offers the choice between different conversation styles, catering to diverse user preferences.
  • โœ๏ธ Message Editing Features: Provides a suite of editing tools, including request redo, edit combination, and deletion, for precise conversation control.
  • ๐Ÿ“– Auto-rendered Markdown: Delivers a rich text experience that immerses users by transforming Markdown into beautifully formatted messages.
  • ๐ŸŽš๏ธ Programmatic Controls (Ref): Commands the chat flow with precision, allowing developers to create a tailored conversational experience.

Design Evolution / In Progress

  • Customized Dialogue Rendering with Edit Capabilities - issue/21
  • Enhanced Request Parameters - The power to infuse additional parameters into your requests is on the horizon
  • Personalized Error Handling - Craft unique fallbacks and configurations for those unexpected moments
  • Expanded Documentation & Globalization - Access comprehensive guides and international support for a truly borderless experience
  • Atomic Component Design - Anticipate a modular approach to design that promises both simplicity and versatility

๐Ÿ‘€ Showcase

Let's showcase some of ProChat's signature features:

Streamlined Dialogue Content Editor
Engage in Streamlined Conversations that flow as naturally as a river Refine, reshape, and perfect your dialogue with tools that allow for real-time edits.
Integrated Render
Dive into the vivid world of chat with our Built-in Render, a tool designed to bring text to life.

๐Ÿ–ฅ Browser compatibility

Note

edge Edge chrome safari electron_48x48
Edge last 2 versions last 2 versions last 2 versions last 2 versions

โŒจ๏ธ Local Development

You can use Github Codespaces for online development:

Or clone it for local development:

$ git clone https://github.com/ant-design/pro-chat.git
$ cd pro-chat
$ pnpm install
$ pnpm dev

๐Ÿค Contributing

Important

Join our collaborative ecosystem. Your contributions are the heartbeat of our project. Here's how you can be an integral part of our vibrant community:

  • Integrate and Innovate: Incorporate Ant Design Pro, umi, and ProChat into your projects. Your real-world usage and feedback are invaluable to us.
  • Voice Your Insights: Encounter a glitch? Have a query? Your perspectives matter. Share them by submitting issues and help us enhance the user experience.
  • Shape the Future: Have code enhancements or feature ideas? We invite you to propose pull requests and contribute directly to the evolution of our codebase.

Every contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. ๐Ÿ˜ƒ





๐Ÿ›ฃ๏ธ Ecosystem

  • ProComponents - Designed for Enterprise-Level Application, Use Ant Design like a Pro!.
  • ProEditor - The Ultimate Editor UI Framework and Components.
  • ProFlow - A Flow Editor Framework base on React-Flow.
  • ProChat - Components Library for Quickly Building LLM Chat Interfaces.


๐Ÿ“ License

Copyright ยฉ 2023 - present AFX & Ant Digital.
This project is MIT licensed.

More Repositories

1

ant-design

An enterprise-class UI design language and React UI library
TypeScript
91,344
star
2

ant-design-pro

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Use Ant Design like a Pro!
TypeScript
36,376
star
3

ant-design-mobile

Essential UI blocks for building mobile web apps.
TypeScript
11,641
star
4

ant-design-landing

๐Ÿšต Landing Pages of Ant Design System
JavaScript
6,169
star
5

ant-motion

๐Ÿšด Animate specification and components of Ant Design
JavaScript
4,587
star
6

pro-components

๐Ÿ† Use Ant Design like a Pro!
TypeScript
4,246
star
7

ant-design-mobile-rn

Ant Design for React Native
TypeScript
3,036
star
8

ant-design-charts

A React Chart Library
JavaScript
1,922
star
9

ant-ux

๐ŸŽธ A sitemap template for ux design
JavaScript
1,144
star
10

antd-mobile-samples

antd-mobile samples
HTML
1,144
star
11

ant-design-pro-layout

๐ŸŒƒ Powerful and easy to use beautiful layout
TypeScript
1,000
star
12

ant-design-icons

โญ Ant Design SVG Icons
TypeScript
948
star
13

ant-design-web3

๐Ÿฅณ Efficient react components for building dapps easier | Connect crypto wallets and more Web3 UI components | Web3 icons | Supports Ethereum, Solana, Bitcoin, TON, Sui and others.
TypeScript
844
star
14

antd-init

๐Ÿ”ฐ Ant Design boilerplate generator.
JavaScript
815
star
15

pro-blocks

Blocks of Ant Design Pro.
TypeScript
714
star
16

ant-design-colors

๐ŸŽจ Color Palettes Calculator of Ant Design
TypeScript
635
star
17

create-react-app-antd

Use antd in create-react-app without ejecting โœจ
JavaScript
583
star
18

pro-table

๐Ÿ† Use Ant Design Table like a Pro!
TypeScript
560
star
19

sunflower

๐Ÿฆน Process components for antd4 & antd3 by alipay industry technology
TypeScript
499
star
20

ant-design-dark-theme

๐ŸŒš Dark theme variables of Ant Design
TypeScript
482
star
21

react-tutorial

ๅŸบไบŽ umi ็š„ Ant Design ๅฎžๆˆ˜ๆ•™็จ‹้…ๅฅ—ไปฃ็  https://www.yuque.com/ant-design/course
JavaScript
434
star
22

ant-design-mini

Ant Design for Alipay Mini Program
TypeScript
420
star
23

antd-tools

๐Ÿ”ง Cli Tools for Ant Design React
JavaScript
396
star
24

ant-design-pro-site

TypeScript
395
star
25

ant-design-aliyun-theme

โš™ Ant Design Theme for console.aliyun.com
TypeScript
307
star
26

antd-dayjs-webpack-plugin

โฐ Day.js webpack plugin for Ant Design
JavaScript
289
star
27

ant-design-pro-cli

Cli tool of Ant Design Pro
JavaScript
261
star
28

pro-flow

๐Ÿชข A React based Flow Framework, include Flow View and Flow Editor
TypeScript
259
star
29

cssinjs

TypeScript
240
star
30

antd-style

css-in-js library with antd v5 token system
TypeScript
216
star
31

pro-editor

๐Ÿ•น๏ธ The Ultimate Editor UI Framework and Components
TypeScript
207
star
32

intl-example

๐ŸŒ example about`antd`/`antd-mobile` internationalization
JavaScript
204
star
33

antd-sketchapp

โš›๏ธ๐Ÿ’Ž๐Ÿœ Render Ant Design components to Sketch.
HTML
201
star
34

html2sketch

parser HTML to Sketch JSON
TypeScript
162
star
35

scaffold-market

Scaffolds market for single page application
JavaScript
129
star
36

kitchen

Powerful sketch plugin for design cooperation ๐Ÿณ๐Ÿณ๐Ÿณ
125
star
37

ant-design-mobile-chart

Ant Design Mobile Chart based on F2
JavaScript
103
star
38

codemod-v4

codemod cli for antd v4 upgrade
JavaScript
94
star
39

compatible

TypeScript
89
star
40

ant-bot

JavaScript
78
star
41

antd-library

Axure library for Ant Design
HTML
76
star
42

parcel-antd

Use antd with parcel
TypeScript
75
star
43

v2.preview.pro.ant.design

v2.preview.pro.ant.design
JavaScript
73
star
44

antd-token-previewer

TypeScript
71
star
45

antd-mobile-pro

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Use Antd Mobile like a Pro!
TypeScript
52
star
46

ant-design-blocks

umi blocks of Ant Design.
TypeScript
50
star
47

antd-mobile-icons-v2

svg icons for ant-design-mobile
45
star
48

antd-issue-helper

TypeScript
42
star
49

antd-migration-helper

CLI tool to aid in migrate antd from old version to newer version.
JavaScript
41
star
50

u.ant.design

URL shortener.
JavaScript
35
star
51

antd-mobile-template

umijs@4 and antd-mobile@5 quick start project, You can click the `use template` to quickly create your own app.
TypeScript
34
star
52

editable-table

JavaScript
33
star
53

bisheng-plugin-antd

To support ant.design-like websites.
JavaScript
33
star
54

pro-list

ๆขฆๆƒณ่ขซ antd ๅ†…็ฝฎ็š„ๅŸบไบŽ antd ไฟฎๆ”น็š„ list
TypeScript
30
star
55

antd-color-editor

๐ŸŽจ an open-source color editor for designing color system
TypeScript
29
star
56

functional-mini

TypeScript
28
star
57

sketch-json-api

๐Ÿ’Ž๐Ÿ”ง Node.js Library for Editing Sketch Files.
TypeScript
26
star
58

HiTu

TypeScript
26
star
59

examples

More complex demo using antd
JavaScript
25
star
60

static-style-extract

TypeScript
24
star
61

doc

antd ๆŠ€ๆœฏๆ ˆ็š„ๆ‰€ๆœ‰ๆ–‡ๆกฃ๏ผŒ็”จไบŽๅš AI ๅŠŸ่ƒฝ
JavaScript
21
star
62

antd-codemod

antd codemod scripts.
JavaScript
20
star
63

happy-work-theme

TypeScript
17
star
64

use-emotion-css

A gadget that combines emotion and antd token
TypeScript
17
star
65

codemod-v5

codemod cli for antd v5 upgrade
JavaScript
17
star
66

ant-design-landing-build

JavaScript
16
star
67

antd-changelog-editor

Ant Design Changelog Editor
TypeScript
14
star
68

antd-vsce

ant design ็š„ vscode ๆ’ไปถ
TypeScript
13
star
69

next-pro-components

ไธ‹ไธ€ไธช็‰ˆๆœฌ็š„ pro-components
HTML
13
star
70

antd-theme

CSS
10
star
71

antd-adapter

An adapter which makes newer antd works like old one. DIRTY HACK \ T^T /
JavaScript
9
star
72

sketch-assistant-ant-design

TypeScript
9
star
73

ant-design-analysis

bundle size analysis of ant-design-mobile
HTML
8
star
74

fast-color

TypeScript
8
star
75

antd-mobile-icons

The icon set for antd-mobile.
JavaScript
7
star
76

.github

6
star
77

nextjs-registry

Style registry of Ant Design for Nextjs
TypeScript
6
star
78

beta.pro.ant.design

beta for pro scaffold
HTML
6
star
79

2x.ant.design

[email protected] site
HTML
6
star
80

1x.ant.design

[email protected] site http://1x.ant.design
HTML
5
star
81

010x.ant.design

[email protected] site
HTML
5
star
82

ant-design-web3-demo

A demo for Ant Design Web3 course.
TypeScript
5
star
83

1x.mobile.ant.design

[email protected] site, http://1x.mobile.ant.design
HTML
4
star
84

v2.pro.ant.design

https://v2-pro.ant.design/index-cn v2 version
HTML
4
star
85

next.mobile.ant.design

This is the documentation site for antd-mobile v5.
4
star
86

beta.preview.pro.ant.design

ant.design.pro ็š„ beta ้ข„่งˆ
JavaScript
4
star
87

3x.ant.design

HTML
4
star
88

012x.ant.design

[email protected] site http://012x.ant.design
HTML
3
star
89

07x.mobile.ant.design

[email protected] site
3
star
90

011x.ant.design

[email protected] site http://011x.ant.design
HTML
3
star
91

v1.pro.ant.design

ant design pro document
CSS
3
star
92

08x.mobile.ant.design

[email protected] site
HTML
3
star
93

03x.pro.ant.design

Document for ant design pro 0.3.x
HTML
3
star
94

09x.mobile.ant.design

[email protected] site
HTML
3
star
95

2x.rn.mobile.ant.design

http://2x.rn.mobile.ant.design/
HTML
3
star
96

pro-chat-next

TypeScript
2
star
97

09x.ant.design

document of [email protected]
JavaScript
2
star
98

v1.preview.pro.ant.design

ant design pro v1 preview
JavaScript
2
star
99

beta.mobile.ant.design

No longer use, please visitor:
HTML
2
star
100

v5.ant-design-pro-site

TypeScript
2
star