ChatUI - Ali open source intelligent conversational UI component library (bibliothèque de composants d'interface utilisateur conversationnelle intelligente)

Qu'est-ce que ChatUI ?

ChatUI est une bibliothèque de composants d'interface utilisateur conversationnelle intelligente open source lancée par l'équipe d'Alibaba.ChatUI est basé sur le framework React et écrit en TypeScript, avec un design réactif, s'adapte automatiquement aux navigateurs de bureau et aux appareils mobiles et autres terminaux.ChatUI prend en charge l'internationalisation, les développeurs peuvent facilement réaliser une commutation multilingue basée sur la configuration pour répondre aux besoins des utilisateurs mondiaux. La personnalisation du thème de ChatUI est puissante, peut profondément personnaliser le style de l'interface pour correspondre au style de la marque ou aux préférences de l'utilisateur.ChatUI suit les normes d'accessibilité, basées sur les attributs ARIA et d'autres technologies pour améliorer la convivialité des utilisateurs handicapés.ChatUI est adapté aux systèmes de service à la clientèle en ligne, aux applications d'assistants intelligents, aux plateformes de médias sociaux et à d'autres scénarios, pour aider les développeurs à construire rapidement des applications de chat de haute qualité.

Principales caractéristiques de ChatUI

• conception réactiveChatUI s'adapte automatiquement aux navigateurs de bureau, aux tablettes et aux appareils mobiles, garantissant une expérience interactive cohérente et fluide sur tous les appareils sans travail d'adaptation supplémentaire.
• Soutien à l'internationalisationLes développeurs peuvent facilement traduire les applications en plusieurs langues à l'aide de simples fichiers de configuration afin de répondre aux besoins des utilisateurs dans les différentes régions du monde.
• Personnalisation du thèmeL'interface hautement personnalisable permet aux développeurs d'ajuster librement le style, les couleurs, les polices et d'autres éléments de l'interface pour créer une interface de chat unique qui correspond au style de la marque ou aux préférences des utilisateurs.
• Aide à l'accessibilitéLes normes d'accessibilité, basées sur des technologies telles que les attributs ARIA et la navigation au clavier, sont respectées afin d'améliorer la convivialité de l'application pour les utilisateurs handicapés et d'assurer une utilisation sans heurts pour tous les utilisateurs.
• Support TypeScriptLe développement de TypeScript, avec son système de type statique, permet d'améliorer la maintenabilité du code et l'efficacité du développement, de fournir une meilleure vérification du type et des conseils sur le code.

Adresse du site officiel du ChatUI

• Site web du projet: :https://chatui.io/
• Dépôt GitHub: :https://github.com/alibaba/ChatUI/

Comment utiliser ChatUI

• Installation de ChatUI: :
  • Installation basée sur npm: :

npm install chatui

• • Installation basée sur le fil: :

yarn add chatui

• Introduction de ChatUIIntroduire les composants principaux de ChatUI et les fichiers de style dans le projet. Exemple :

import ChatUI from 'chatui';
import 'chatui/dist/style.css';

• Configuration de baseCréer une interface de chat simple, configurer les composants et les fonctionnalités de base. Exemple :

import React, { useState } from 'react';
import ChatUI from 'chatui';
import 'chatui/dist/style.css';

const App = () => {
  const [messages, setMessages] = useState([]);

  const sendMessage = (message) => {
    setMessages([...messages, message]);
  };

  return (
    <ChatUI
      messages={messages}
      onSend={sendMessage}
      placeholder="请输入消息"
    />
  );
};

export default App;

• Thèmes personnalisésModifier les variables CSS pour personnaliser le thème. Par exemple :

:root {
  --chatui-background-color: #f0f0f0;
  --chatui-text-color: #333;
  --chatui-primary-color: #1890ff;
}

• Soutien à l'internationalisationConfiguration des packs linguistiques : Configurer les packs linguistiques pour permettre la prise en charge de plusieurs langues. Exemple :

import enUS from 'chatui/dist/locales/en-US';

ChatUI.setLocale(enUS);

• Ajouter d'autres fonctionsAjouter des fonctionnalités supplémentaires si nécessaire, telles que le téléchargement de fichiers, la prise en charge des emoji, la saisie vocale, etc. Exemple :

<ChatUI
  messages={messages}
  onSend={sendMessage}
  placeholder="请输入消息"
  supportUpload={true}
  supportVoice={true}
/>

• haute coutureLes composants : étendre les composants ou les styles personnalisés pour mettre en œuvre une logique d'interaction plus complexe. Exemple :

const CustomMessage = ({ message }) => {
  return (
    <div className="custom-message">
      <p>{message.text}</p>
    </div>
  );
};

<ChatUI
  messages={messages}
  onSend={sendMessage}
  placeholder="请输入消息"
  customMessageComponent={CustomMessage}
/>

• Essais et optimisationTester l'interface de chat sur différents appareils et navigateurs pour s'assurer que la conception réactive et les fonctions d'accessibilité fonctionnent correctement. Optimiser l'expérience en fonction des commentaires des utilisateurs.

Les points forts du ChatUI

• Hauteur personnalisableLe système de gestion de l'information de l'entreprise : il permet de styliser rapidement les thèmes en fonction de variables CSS afin de répondre aux besoins de personnalisation de la marque, avec de puissantes fonctions d'internationalisation et une prise en charge aisée des langues multiples.
• Bonne expérience utilisateurLes utilisateurs doivent être conscients de l'importance de la qualité de l'information et des informations qu'elle contient : utiliser une conception réactive pour s'adapter automatiquement aux ordinateurs de bureau et aux appareils mobiles afin de garantir une expérience cohérente sur tous les terminaux, et respecter les normes d'accessibilité pour faciliter la tâche des utilisateurs handicapés.
• Une grande évolutivitéLes fonctions et composants personnalisés sont pris en charge par les développeurs en fonction des besoins d'expansion flexible, tels que le téléchargement de fichiers, la saisie vocale, etc. pour répondre aux besoins de scènes complexes.
• Stabilité et fiabilitéLe système est basé sur les meilleures pratiques d'Alibaba, validé par des applications à grande échelle, avec une grande stabilité, tandis que la communauté open source est active, fournissant une documentation riche et un support technique.

A qui s'adresse ChatUI ?

• développeur front-endLes développeurs qui construisent rapidement des interfaces de chat de haute qualité avec des composants riches et une grande capacité de personnalisation afin de mettre en œuvre efficacement les exigences du projet.
• chef de produitChatUI : Pour ceux qui ajoutent des fonctionnalités de chat à leurs produits, l'internationalisation et l'accessibilité de ChatUI répondent aux besoins des groupes multilingues et multi-utilisateurs.
• Concepteur UI/UXLes concepteurs qui se concentrent sur l'expérience de l'utilisateur et l'esthétique de l'interface pour obtenir une conception personnalisée basée sur des fonctions de personnalisation du thème afin d'améliorer l'attrait du produit.
• Équipe technique de l'entrepriseLa stabilité et l'évolutivité de ChatUI répondent aux besoins complexes des entreprises : les équipes qui construisent des systèmes de chat pour le service client en ligne, les outils de communication interne des entreprises et d'autres scénarios.
• Passionnés et apprenants de l'open source: Intéressé par les technologies telles que React, TypeScript, etc., en apprenant et en pratiquant avec des projets open source.