{"id":19884885,"url":"https://github.com/twihike/chat-ui-react","last_synced_at":"2025-05-09T02:34:43.056Z","repository":{"id":39129236,"uuid":"261781825","full_name":"twihike/chat-ui-react","owner":"twihike","description":"💬 React component for conversational UI","archived":false,"fork":false,"pushed_at":"2023-01-07T04:41:10.000Z","size":5052,"stargazers_count":94,"open_issues_count":29,"forks_count":29,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T18:17:53.868Z","etag":null,"topics":["bot","chat","material-ui","react"],"latest_commit_sha":null,"homepage":"https://chat-ui-react-demo.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twihike.png","metadata":{"files":{"readme":"README-ja.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-06T14:19:42.000Z","updated_at":"2024-12-29T12:14:09.000Z","dependencies_parsed_at":"2023-02-06T12:01:39.210Z","dependency_job_id":null,"html_url":"https://github.com/twihike/chat-ui-react","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twihike%2Fchat-ui-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twihike%2Fchat-ui-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twihike%2Fchat-ui-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twihike%2Fchat-ui-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twihike","download_url":"https://codeload.github.com/twihike/chat-ui-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253178161,"owners_count":21866462,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bot","chat","material-ui","react"],"created_at":"2024-11-12T17:30:30.436Z","updated_at":"2025-05-09T02:34:43.031Z","avatar_url":"https://github.com/twihike.png","language":"TypeScript","funding_links":[],"categories":["AI"],"sub_categories":[],"readme":"# chat-ui-react\n\n[![npm version](https://badge.fury.io/js/chat-ui-react.svg)](https://badge.fury.io/js/chat-ui-react) [![ci](https://github.com/twihike/chat-ui-react/workflows/ci/badge.svg)](https://github.com/twihike/chat-ui-react/actions) [![release](https://github.com/twihike/chat-ui-react/workflows/release/badge.svg)](https://github.com/twihike/chat-ui-react/actions) [![license](https://img.shields.io/github/license/twihike/chat-ui-react)](LICENSE)\n\nchat-ui-reactは会話型のWebUIを構築するためのnpmパッケージです。\nこのパッケージが提供するものは次の通りです。\n\n- Reactコンポーネント\n  - チャットのメッセージ\n  - メッセージの入力フォーム\n- コンポーネントの表示制御を行うクラス\n\nあなたのオンラインチャットやチャットボットにこれを組み込むことができます。\n\n現在、コンポーネントはReactのUIフレームワークであるMaterial-UIを利用しています。\nMaterial-UI以外のコンポーネントを望むなら、オリジナルのコンポーネントに差し替えて利用することもできます。\n\n![demo](https://raw.githubusercontent.com/twihike/chat-ui-react/assets/chat-ui-react-demo.gif)\n\n## デモ\n\n[デモサイト](https://chat-ui-react-demo.netlify.app)をご覧ください。\n\n## サンプル\n\n`examples`ディレクトリをご覧ください。\n\n- echo-bot: ユーザの入力をおうむ返しするチャットボットです。\n- cdn: すぐに始める簡単な方法です。\n\n## インストール\n\n### Node.js\n\nWith npm:\n\n```shell\nnpm install chat-ui-react react react-dom @material-ui/core\n```\n\nWith yarn:\n\n```shell\nyarn add chat-ui-react react react-dom @material-ui/core\n```\n\n### CDN\n\n```html\n\u003cscript crossorigin=\"anonymous\" src=\"https://unpkg.com/react@16/umd/react.development.js\"\u003e\u003c/script\u003e\n\u003cscript crossorigin=\"anonymous\" src=\"https://unpkg.com/react-dom@16/umd/react-dom.development.js\"\u003e\u003c/script\u003e\n\u003cscript crossorigin=\"anonymous\" src=\"https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js\"\u003e\u003c/script\u003e\n\u003cscript crossorigin=\"anonymous\" src=\"https://unpkg.com/chat-ui-react@latest/dist/browser/chat-ui-react.umd.polyfill.js\"\u003e\u003c/script\u003e\n\u003cscript crossorigin=\"anonymous\" src=\"https://unpkg.com/@babel/standalone@7/babel.min.js\"\u003e\u003c/script\u003e\n```\n\n## 使い方\n\n### はじめに\n\nこのパッケージは、チャットを表示する`MuiChat`コンポーネントとチャットの表示を制御する`ChatController`クラスで構成されます。以下はそれぞれの関係を表した図です。\n\n```text\n+------------+           +------------------+           +-----------+\n|            |   Call    |                  |   Call    |           |\n|            |           |                  |           |           |\n|  Your App  |  +-----\u003e  |  ChatController  |  +-----\u003e  |  MuiChat  |\n|            |           |                  |           |           |\n|            |           |                  |           |           |\n+------------+           +------------------+           +-----------+\n```\n\nこの構造により、私たちはチャットの表示内容を`ChatController`に渡すことだけに専念できます。コンポーネントの表示制御を気にする必要はありません。\n\n見た目で気に入らない部分があれば、`MuiChat`を別のコンポーネントに差し替えることができます。差し替えによるアプリの変更は生じません。\n\n具体的な使い方を理解するために、簡単な例を示します。\n\n```tsx\nfunction App(): React.ReactElement {\n  const [chatCtl] = React.useState(new ChatController());\n\n  React.useMemo(async () =\u003e {\n    // チャットの内容はChatControllerを使って表示します\n    await chatCtl.addMessage({\n      type: 'text',\n      content: `Hello, What's your name.`,\n      self: false,\n    });\n    const name = await chatCtl.setActionRequest({ type: 'text' });\n  }, [chatCtl]);\n\n  // 表示に使用するコンポーネントは一つだけです\n  return \u003cMuiChat chatController={chatCtl} /\u003e;\n}\n```\n\n以降では`ChatController`の使い方を説明します。\n\n### メッセージ\n\nチャットのメッセージを表示するには`addMessage`メソッドを利用します。\n`self`オプションに自分のメッセージか他人のメッセージかを指定します。\n\n```typescript\nawait chatCtl.addMessage({\n  type: 'text',\n  content: `Hello, What's your name.`,\n  self: false,\n});\n```\n\n### アクション\n\nユーザにメッセージの入力を促すには`setActionRequest`メソッドを利用します。\n\n#### アクションの回数\n\nアクションには1回限りのアクションを要求する方法と常にアクションを要求する方法があります。\n\n##### 1回限りのアクション\n\nユーザから1回限りのアクションを要求するには`always`オプションに`false`を指定します。\nメソッドの返却値は、ユーザの入力を返却する`Promise`です。\n\n```typescript\nconst response = await chatCtl.setActionRequest({\n  type: 'text',\n  always: false,\n});\nconsole.log(response.value);\n```\n\n##### 常時アクション\n\nユーザから常にアクションを要求するには`always`オプションに`true`を指定します。\nユーザから複数回入力されるため、入力を受け取るコールバック関数を指定します。\nユーザからの入力要求を中止するには`cancelActionRequest`メソッドを呼び出します。\n\n```typescript\nchatCtl.setActionRequest(\n  { type: 'text', always: true },\n  (response) =\u003e {\n    console.log(response.value);\n  }\n);\nchatCtl.cancelActionRequest();\n```\n\n#### アクションタイプ\n\nアクションにはテキストや選択などいくつかの種類があります。\n\n##### テキスト\n\nこのアクションは文字列を入力します。\n\n`type`に`text`を指定します。\nメソッドの返却値はユーザが入力したメッセージです。\n\n```typescript\nconst response = await chatCtl.setActionRequest({ type: 'text' });\nconsole.log(response.value);\n```\n\n##### 単一選択\n\nこのアクションは選択肢から1つ選びます。\n\n`type`に`select`を指定します。`options`に選択肢を指定します。`value`はhtmlの属性、`text`は画面表示に使います。\nメソッドの返却値はユーザが選択した`options`の要素です。\n\n```typescript\nconst response = await chatCtl.setActionRequest({\n  type: 'select',\n  options: [\n    {\n      value: 'a',\n      text: 'A',\n    },\n    {\n      value: 'b',\n      text: 'B',\n    },\n  ],\n});\nconsole.log(response.option);\n// Aが選択された場合\n// { value: 'a', text: 'A' }\n```\n\n##### 複数選択\n\nこのアクションは選択肢から複数選びます。\n\n`type`に`multi-select`を指定します。`options`に選択肢を指定します。`value`はhtmlの属性、`text`は表示に使います。メソッドの返却値は選択された`options`です。\n\n```typescript\nconst response = await chatCtl.setActionRequest({\n  type: 'multi-select',\n  options: [\n    {\n      value: 'a',\n      text: 'A',\n    },\n    {\n      value: 'b',\n      text: 'B',\n    },\n  ],\n});\nconsole.log(response.options);\n// AとBが選択された場合\n// [{ value: 'a', text: 'A' }, { value: 'b', text: 'B' }]\n```\n\n##### ファイル\n\nこのアクションはファイルを入力します。\n\n`type`に`file`を指定します。`input`タグの属性として`accept`と `multiple`を指定できます。メソッドの返却値はユーザが入力したファイルの配列です。\n\n```typescript\nconst response = await chatCtl.setActionRequest({\n  type: 'file',\n  accept: 'image/*',\n  multiple: true,\n});\nconsole.log(response.files);\n```\n\n##### 音声\n\nこのアクションは音声を入力します。\n\n`type`に`audio`を指定します。メソッドの返却値はユーザが入力した音声の`Blob`です。音声入力に失敗した場合は`reject`された`Promise`を返します。\n\n```typescript\ntry {\n  const response = await chatCtl.setActionRequest({\n    type: 'audio',\n  });\n  console.log(response.audio);\n} catch (e) {\n  console.log(e);\n}\n```\n\n##### カスタム\n\nこのアクションはあなたのカスタムコンポーネントを利用して入力します。\n`type`に`custom`を指定します。`Component`にあなたのコンポーネントを指定します。\n\nカスタムコンポーネントは、Reactの作法に倣っていつも通り入力フォームを作成します。\nプロパティとして`chatController`と`actionRequest`を受け取ります。これはchat-ui-reactにより自動でセットされます。\nそして、ユーザから受け取った入力を`ChatController`クラスの`setActionResponse`メソッドを使って伝搬します。\nこれはアプリケーションが`setActionRequest`の返却値として受け取ることができます。\n\n```tsx\nfunction GoodInput({\n  chatController,\n  actionRequest,\n}: {\n  chatController: ChatController;\n  actionRequest: ActionRequest;\n}) {\n  const chatCtl = chatController;\n\n  const setResponse = React.useCallback((): void =\u003e {\n    const res = { type: 'custom', value: 'Good!' };\n    chatCtl.setActionResponse(actionRequest, res);\n  }, [actionRequest, chatCtl]);\n\n  return (\n    \u003cButton\n      type=\"button\"\n      onClick={setResponse}\n      variant=\"contained\"\n      color=\"primary\"\n    \u003e\n      Good!\n    \u003c/Button\u003e\n  );\n}\n\nconst custom = await chatCtl.setActionRequest({\n  type: 'custom',\n  Component: GoodInput,\n});\nconsole.log(custom.value);\n```\n\n## License\n\nCopyright (c) 2020 twihike. All rights reserved.\n\nThis project is licensed under the terms of the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwihike%2Fchat-ui-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwihike%2Fchat-ui-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwihike%2Fchat-ui-react/lists"}