{"id":21228200,"url":"https://github.com/hexlet/react-flowbot-ui-kit","last_synced_at":"2025-07-10T15:30:54.093Z","repository":{"id":37827504,"uuid":"382583276","full_name":"Hexlet/react-flowbot-ui-kit","owner":"Hexlet","description":"SDK for custom chatbot","archived":false,"fork":false,"pushed_at":"2024-08-30T19:52:48.000Z","size":985,"stargazers_count":4,"open_issues_count":5,"forks_count":9,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-10-31T17:59:17.642Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"https://hexlet.github.io/react-flowbot-ui-kit/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Hexlet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-07-03T10:06:31.000Z","updated_at":"2024-09-17T18:02:06.000Z","dependencies_parsed_at":"2024-03-23T16:44:07.586Z","dependency_job_id":null,"html_url":"https://github.com/Hexlet/react-flowbot-ui-kit","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexlet%2Freact-flowbot-ui-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexlet%2Freact-flowbot-ui-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexlet%2Freact-flowbot-ui-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Hexlet%2Freact-flowbot-ui-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Hexlet","download_url":"https://codeload.github.com/Hexlet/react-flowbot-ui-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225643081,"owners_count":17501325,"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":["hacktoberfest"],"created_at":"2024-11-20T23:15:01.268Z","updated_at":"2024-11-20T23:15:01.688Z","avatar_url":"https://github.com/Hexlet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flowbot Widget\n\n## Установка \n\n1. Установить зависимость:\n    ```bash\n    npm i @hexlet/chatbot-v2\n    ```\n2. Импортировать стили:\n    ```javascript\n    import '@hexlet/chatbot-v2/styles'\n    ```\n3. Импортировать и запустить бота:\n    ```javascript\n    import ReactDOM from 'react-dom/client';\n    import Widget from '@hexlet/chatbot-v2';\n    import steps from '@hexlet/chatbot-v2/example-steps';\n    import '@hexlet/chatbot-v2/styles';\n\n    const container = document.getElementById('root');\n    ReactDOM.createRoot(container)\n      .render(Widget(steps));\n    ```\n\nФункция принимает параметром шаги для работы чат-бота.\n\n## Описание конфигурации шагов\n\nКаждый шаг описывается объектом:\n\n```javascript\n{\n  id, // Идентификатор текущего шага\n  messages, // Сообщения\n  buttons, // Отображаемые кнопки\n}\n```\n\nКаждая кнопка описывается объектом:\n\n```javascript\n{\n  text, // Текст кнопки\n  nextStepId, // Идентификатор шага, к которому будет переход при клике по кнопке\n  type, // тип кнопки\n}\n```\n\nПример:\n\n```javascript\nconst steps = [\n  {\n    id: 'welcome',\n    messages: [\n      'Привет! Я ваш виртуальный помощник. Нажмите \"Начать разговор\", чтобы открыть чат',\n    ],\n    buttons: [\n      {\n        text: 'Начать разговор',\n        nextStepId: 'start',\n        type: \"button\",\n      },\n    ],\n  },\n  {\n    id: 'start',\n    messages: [\n      'Помогу вам выбрать подходящий курс. Выбирайте категорию вопроса, и буквально через пару шагов я смогу рассказать вам то, что нужно.',\n    ],\n    buttons: [\n      {\n        text: 'Попробовать себя в IT',\n        nextStepId: 'try',\n        type: \"button\",\n      },\n    ],\n  },\n  {\n    id: 'try',\n    messages: [\n      'У нас есть подготовительные курсы, которые длятся всего 2 недели.За это время вы знакомитесь с основами программирвоания, пробуете его на практике и плавной подойдете к старту обучения в основной программе. Все это под руководством опытного программиста. Он поможет, если будут сложности. Курс стоит всего 990 рублей',\n    ],\n    buttons: [\n      {\n        text: 'Вернуться назад',\n        nextStepId: 'start',\n        type: \"button\",\n      },\n    ],\n  },\n];\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexlet%2Freact-flowbot-ui-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhexlet%2Freact-flowbot-ui-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhexlet%2Freact-flowbot-ui-kit/lists"}