@magicul/react-chat-stream - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

.eslintrc.json

+{
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "browser": true
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "jsx-a11y/anchor-is-valid": 0,
+    "default-case": "off",
+    "no-irregular-whitespace": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "jsx-a11y/control-has-associated-label": "off",
+    "jsx-a11y/label-has-for": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+    "jsx-a11y/tabindex-no-positive": "off",
+    "jsx-a11y/no-noninteractive-tabindex": "off",
+    "jsx-a11y/interactive-supports-focus": "off",
+    "jsx-a11y/media-has-caption": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/array-type": ["error", { "default": "array-simple" }],
+    "no-case-declarations": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      { "functions": false, "classes": true, "variables": false }
+    ],
+    "no-use-before-define": "off",
+    "react/jsx-props-no-spreading": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "no-restricted-syntax": "off",
+    "react/no-array-index-key": "off",
+    "react/no-danger": "off",
+    "prefer-destructuring": "off",
+    "react/jsx-boolean-value": "off",
+    "dot-notation": "off",
+    "label-has-for": "off",
+    "import/named": "off",
+    "react/function-component-definition": ["error", {
+      "namedComponents": "arrow-function",
+      "unnamedComponents": "arrow-function"
+    }],
+    "comma-dangle": ["error", "always-multiline"],
+    "func-style": ["error", "expression", { "allowArrowFunctions": true }],
+    "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
+    "no-shadow": "off",
+    "import/no-unresolved": "off",
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
+    "react/prop-types": "off",
+    "react/no-multi-comp": "off",
+    "react/no-unescaped-entities": "off",
+    "no-nested-ternary": "off",
+    "lines-between-class-members": "off",
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "no-return-assign": "off",
+    "consistent-return": "off",
+    "no-undef": "off",
+    "react/jsx-no-undef": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "error",
+    "react/destructuring-assignment": "off",
+    "react/require-default-props": "off",
+    "import/no-cycle": "off",
+    "no-continue": "off",
+    "spaced-comment": ["error", "always", { "markers": ["/"] }],
+    "react/jsx-key": [1, { "checkFragmentShorthand": false }],
+    "import/extensions": 0,
+    "react/display-name": 0,
+    "no-unused-expressions": [
+      "error",
+      { "allowShortCircuit": true, "allowTernary": true }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "arrowParens": "avoid",
+        "singleQuote": true,
+        "trailingComma": "all",
+        "semi": true
+      }
+    ]
+  }
+}

dist/types.d.ts

+import useChatStream from './hooks/useChatStream';
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+export type UseChatStreamRole = 'bot' | 'user';
+export type UseChatStreamChatMessage = {
+    role: UseChatStreamRole;
+    content: string;
+    id: string;
+};
+export type UseChatStreamHttpOptions = {
+    url: string;
+    method: HttpMethod;
+    query?: Record<string, string>;
+    headers?: HeadersInit;
+    body?: Record<string, string>;
+};
+export type UseChatStreamEventHandlers = {
+    onMessageAdded: (message: UseChatStreamChatMessage) => unknown | Promise<unknown>;
+};
+export type UseChatStreamInputMethod = {
+    type: 'body' | 'query';
+    key: string;
+};
+export type UseChatStreamInput = {
+    options: UseChatStreamHttpOptions;
+    method: UseChatStreamInputMethod;
+    handlers: UseChatStreamEventHandlers;
+};
+export type UseChatStreamResult = ReturnType<typeof useChatStream>;
+export {};
+//# sourceMappingURL=types.d.ts.map

dist/types.d.ts.map

+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAElD,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE9D,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,iBAAiB,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,cAAc,EAAE,CAAC,OAAO,EAAE,wBAAwB,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACnF,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,wBAAwB,CAAC;IAClC,MAAM,EAAE,wBAAwB,CAAC;IACjC,QAAQ,EAAE,0BAA0B,CAAA;CACrC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC"}

dist/types.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

dist/types.js.map

+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

src/types.ts

+import useChatStream from './hooks/useChatStream';
+
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+export type UseChatStreamRole = 'bot' | 'user';
+
+export type UseChatStreamChatMessage = {
+  role: UseChatStreamRole;
+  content: string;
+  id: string,
+}
+
+export type UseChatStreamHttpOptions = {
+  url: string;
+  method: HttpMethod;
+  query?: Record<string, string>;
+  headers?: HeadersInit;
+  body?: Record<string, string>;
+}
+
+export type UseChatStreamEventHandlers = {
+  onMessageAdded: (message: UseChatStreamChatMessage) => unknown | Promise<unknown>;
+}
+
+export type UseChatStreamInputMethod = {
+  type: 'body' | 'query',
+  key: string;
+}
+
+export type UseChatStreamInput = {
+  options: UseChatStreamHttpOptions,
+  method: UseChatStreamInputMethod,
+  handlers: UseChatStreamEventHandlers
+};
+
+export type UseChatStreamResult = ReturnType<typeof useChatStream>;

dist/hooks/useChatStream.d.ts

@@ -1,33 +0,14 @@
-import { ChangeEvent, Dispatch, FormEvent, SetStateAction } from 'react';
-type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-type ChatMessage = {
-    role: 'bot' | 'user';
-    content: string;
-    id: string;
-};
-export type UseChatStreamOptions = {
-    url: string;
-    method: HttpMethod;
-    query?: Record<string, string>;
-    headers?: HeadersInit;
-    body?: Record<string, string>;
-};
-export type UseChatStreamInputMethod = {
-    type: 'body' | 'query';
-    key: string;
-};
-type UseChatStreamInput = {
-    options: UseChatStreamOptions;
-    method: UseChatStreamInputMethod;
-};
+import { ChangeEvent, FormEvent } from 'react';
+import { UseChatStreamChatMessage, UseChatStreamInput } from '../types';
 declare const useChatStream: (input: UseChatStreamInput) => {
-    messages: ChatMessage[];
-    setMessages: Dispatch<SetStateAction<ChatMessage[]>>;
+    messages: UseChatStreamChatMessage[];
+    setMessages: import("react").Dispatch<import("react").SetStateAction<UseChatStreamChatMessage[]>>;
     input: string;
-    setInput: Dispatch<SetStateAction<string>>;
+    setInput: import("react").Dispatch<import("react").SetStateAction<string>>;
     handleInputChange: (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => void;
-    handleSubmit: (e?: FormEvent<HTMLFormElement>, newMessage?: string) => Promise<void>;
-    isLoading: boolean;
+    handleSubmit: (e?: FormEvent<HTMLFormElement>) => Promise<void>;
+    submitMessage: (message: string) => Promise<void>;
+    isStreaming: boolean;
 };
 export default useChatStream;
 //# sourceMappingURL=useChatStream.d.ts.map

dist/hooks/useChatStream.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"useChatStream.d.ts","sourceRoot":"","sources":["../../src/hooks/useChatStream.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAY,MAAM,OAAO,CAAC;AAMnF,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE9D,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,KAAK,GAAG,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAC/B,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;CACb,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,MAAM,EAAE,wBAAwB,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,aAAa,UAAW,kBAAkB;;;;;2BAKhB,YAAY,gBAAgB,CAAC,GAAG,YAAY,mBAAmB,CAAC;uBA8B9D,UAAU,eAAe,CAAC,eAAe,MAAM;;CAwBhF,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"useChatStream.d.ts","sourceRoot":"","sources":["../../src/hooks/useChatStream.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAIxE,QAAA,MAAM,aAAa,UAAW,kBAAkB;;;;;2BAKhB,YAAY,gBAAgB,CAAC,GAAG,YAAY,mBAAmB,CAAC;uBAI9D,UAAU,eAAe,CAAC;6BAoCpB,MAAM;;CA6B7C,CAAC;AAEF,eAAe,aAAa,CAAC"}

dist/hooks/useChatStream.js

@@ -68,14 +68,26 @@ "use strict";
 var streams_1 = require("../utils/streams");
-var uuid_1 = require("uuid");
 var BOT_ERROR_MESSAGE = 'Something went wrong fetching AI response.';
 var useChatStream = function (input) {
     var _a = (0, react_1.useState)([]), messages = _a[0], setMessages = _a[1];
-    var _b = (0, react_1.useState)(''), message = _b[0], setMessage = _b[1];
-    var _c = (0, react_1.useState)(false), isLoading = _c[0], setIsLoading = _c[1];
+    var _b = (0, react_1.useState)(''), formInput = _b[0], setFormInput = _b[1];
+    var _c = (0, react_1.useState)(false), isStreaming = _c[0], setIsStreaming = _c[1];
     var handleInputChange = function (e) {
-        setMessage(e.target.value);
+        setFormInput(e.target.value);
     };
-    var addMessageToChat = function (message, role) {
-        if (role === void 0) { role = 'user'; }
-        setMessages(function (messages) { return __spreadArray(__spreadArray([], messages, true), [{ role: role, content: message, id: (0, uuid_1.v4)() }], false); });
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    return [4 /*yield*/, resetInputAndGetResponse()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var addMessage = function (message) {
+        var messageWithId = __assign(__assign({}, message), { id: crypto.randomUUID() });
+        setMessages(function (messages) { return __spreadArray(__spreadArray([], messages, true), [messageWithId], false); });
+        return messageWithId;
     };
@@ -91,3 +103,3 @@ var appendMessageToChat = function (message) {
     var fetchAndUpdateAIResponse = function (message) { return __awaiter(void 0, void 0, void 0, function () {
-        var stream, _a, _b, _c, message_1, e_1_1;
+        var stream, initialMessage, response, _a, _b, _c, message_1, e_1_1;
         var _d, e_1, _e, _f;
@@ -99,5 +111,4 @@ return __generator(this, function (_g) {
                     stream = _g.sent();
-                    if (!stream)
-                        throw new Error();
-                    addMessageToChat('', 'bot');
+                    initialMessage = addMessage({ content: '', role: 'bot' });
+                    response = '';
                     _g.label = 2;
@@ -115,2 +126,3 @@ case 2:
                     appendMessageToChat(message_1);
+                    response += message_1;
                     _g.label = 5;
@@ -137,29 +149,42 @@ case 5:
                 case 12: return [7 /*endfinally*/];
-                case 13: return [2 /*return*/];
+                case 13: return [2 /*return*/, __assign(__assign({}, initialMessage), { content: response })];
             }
         });
     }); };
-    var handleSubmit = function (e, newMessage) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+    var submitMessage = function (message) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, resetInputAndGetResponse(message)];
+    }); }); };
+    var resetInputAndGetResponse = function (message) { return __awaiter(void 0, void 0, void 0, function () {
+        var addedMessage, addedMessage_1, _a, addedMessage_2;
+        var _b, _c, _d, _e, _f, _g;
+        return __generator(this, function (_h) {
+            switch (_h.label) {
                 case 0:
-                    setIsLoading(true);
-                    e === null || e === void 0 ? void 0 : e.preventDefault();
-                    addMessageToChat(newMessage !== null && newMessage !== void 0 ? newMessage : message);
-                    setMessage('');
-                    _b.label = 1;
+                    setIsStreaming(true);
+                    addedMessage = addMessage({ content: message !== null && message !== void 0 ? message : formInput, role: 'user' });
+                    return [4 /*yield*/, ((_c = (_b = input.handlers).onMessageAdded) === null || _c === void 0 ? void 0 : _c.call(_b, addedMessage))];
                 case 1:
-                    _b.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, fetchAndUpdateAIResponse(newMessage !== null && newMessage !== void 0 ? newMessage : message)];
+                    _h.sent();
+                    setFormInput('');
+                    _h.label = 2;
                 case 2:
-                    _b.sent();
-                    return [3 /*break*/, 4];
+                    _h.trys.push([2, 5, 7, 8]);
+                    return [4 /*yield*/, fetchAndUpdateAIResponse(formInput)];
                 case 3:
-                    _a = _b.sent();
-                    addMessageToChat(BOT_ERROR_MESSAGE, 'bot');
-                    return [3 /*break*/, 4];
+                    addedMessage_1 = _h.sent();
+                    return [4 /*yield*/, ((_e = (_d = input.handlers).onMessageAdded) === null || _e === void 0 ? void 0 : _e.call(_d, addedMessage_1))];
                 case 4:
-                    setIsLoading(false);
-                    return [2 /*return*/];
+                    _h.sent();
+                    return [3 /*break*/, 8];
+                case 5:
+                    _a = _h.sent();
+                    addedMessage_2 = addMessage({ content: BOT_ERROR_MESSAGE, role: 'bot' });
+                    return [4 /*yield*/, ((_g = (_f = input.handlers).onMessageAdded) === null || _g === void 0 ? void 0 : _g.call(_f, addedMessage_2))];
+                case 6:
+                    _h.sent();
+                    return [3 /*break*/, 8];
+                case 7:
+                    setIsStreaming(false);
+                    return [7 /*endfinally*/];
+                case 8: return [2 /*return*/];
             }
@@ -171,7 +196,8 @@ });
         setMessages: setMessages,
-        input: message,
-        setInput: setMessage,
+        input: formInput,
+        setInput: setFormInput,
         handleInputChange: handleInputChange,
         handleSubmit: handleSubmit,
-        isLoading: isLoading,
+        submitMessage: submitMessage,
+        isStreaming: isStreaming,
     };
@@ -178,0 +204,0 @@ };

dist/hooks/useChatStream.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"useChatStream.js","sourceRoot":"","sources":["../../src/hooks/useChatStream.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useChatStream.js","sourceRoot":"","sources":["../../src/hooks/useChatStream.ts"],"names":[],"mappings":"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"}

dist/index.d.ts

 import useChatStream from './hooks/useChatStream';
+export * from './types';
 export default useChatStream;
 //# sourceMappingURL=index.d.ts.map

dist/index.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAElD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAElD,cAAc,SAAS,CAAC;AACxB,eAAe,aAAa,CAAC"}

dist/index.js

 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -7,3 +21,4 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 var useChatStream_1 = __importDefault(require("./hooks/useChatStream"));
+__exportStar(require("./types"), exports);
 exports.default = useChatStream_1.default;
 //# sourceMappingURL=index.js.map

dist/index.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,wEAAkD;AAElD,kBAAe,uBAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,wEAAkD;AAElD,0CAAwB;AACxB,kBAAe,uBAAa,CAAC"}

dist/utils/streams.d.ts

@@ -1,4 +0,4 @@
-import type { UseChatStreamInputMethod, UseChatStreamOptions } from '../hooks/useChatStream';
-export declare const getStream: (input: string, options: UseChatStreamOptions, method: UseChatStreamInputMethod) => Promise<ReadableStream<Uint8Array> | null>;
+import { UseChatStreamHttpOptions, UseChatStreamInputMethod } from '../types';
+export declare const getStream: (input: string, options: UseChatStreamHttpOptions, method: UseChatStreamInputMethod) => Promise<ReadableStream<Uint8Array> | null>;
 export declare function decodeStreamToJson(data: ReadableStream<Uint8Array> | null): AsyncIterableIterator<string>;
 //# sourceMappingURL=streams.d.ts.map

dist/utils/streams.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"streams.d.ts","sourceRoot":"","sources":["../../src/utils/streams.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,wBAAwB,EACxB,oBAAoB,EACrB,MAAM,wBAAwB,CAAC;AAahC,eAAO,MAAM,SAAS,UAAiB,MAAM,WAAW,oBAAoB,UAAU,wBAAwB,+CAkB7G,CAAC;AAEF,wBAAuB,kBAAkB,CACvC,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,IAAI,GACtC,qBAAqB,CAAC,MAAM,CAAC,CAkB/B"}
+{"version":3,"file":"streams.d.ts","sourceRoot":"","sources":["../../src/utils/streams.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAa9E,eAAO,MAAM,SAAS,UAAiB,MAAM,WAAW,wBAAwB,UAAU,wBAAwB,+CAcjH,CAAC;AAEF,wBAAuB,kBAAkB,CACvC,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,IAAI,GACtC,qBAAqB,CAAC,MAAM,CAAC,CAkB/B"}

dist/utils/streams.js

@@ -53,4 +53,5 @@ "use strict";
     var g = generator.apply(thisArg, _arguments || []), i, q = [];
-    return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+    return i = {}, verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+    function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+    function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }
     function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
@@ -80,3 +81,2 @@ function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
                 params = '?' + new URLSearchParams(options.query).toString();
-                console.log(JSON.stringify(options.body, function (_k, v) { return v === null ? undefined : v; }));
                 return [4 /*yield*/, fetch(options.url + params, {
@@ -83,0 +83,0 @@ method: options.method,

dist/utils/streams.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"streams.js","sourceRoot":"","sources":["../../src/utils/streams.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAM,eAAe,GAAG;IACtB,cAAc,EAAE,kBAAkB;CACnC,CAAC;AAEF,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,OAA6B,EAAE,MAAgC;;IACzG,OAAO,CAAC,KAAK,GAAG,MAAA,OAAO,CAAC,KAAK,mCAAI,EAAE,CAAC;IACnC,OAAO,CAAC,MAAM,CAAC,IAAI,CAA6B,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAEtE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEK,IAAM,SAAS,GAAG,UAAO,KAAa,EAAE,OAA6B,EAAE,MAAgC;;;;;gBAC5G,OAAO,GAAG,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;gBAEhD,MAAM,GAAG,GAAG,GAAG,IAAI,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;gBACnE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,UAAC,EAAE,EAAE,CAAC,IAAK,OAAA,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,CAAC,CAAC,CAAC;gBAEhE,qBAAM,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG,MAAM,EAAE;wBACjD,MAAM,EAAE,OAAO,CAAC,MAAM;wBACtB,OAAO,wBACF,eAAe,GACf,OAAO,CAAC,OAAO,CACnB;wBACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,UAAC,EAAE,EAAE,CAAC,IAAK,OAAA,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,CAAC;qBAC1E,CAAC,EAAA;;gBAPI,QAAQ,GAAG,SAOf;gBAEF,IAAI,CAAC,QAAQ,CAAC,EAAE;oBAAE,MAAM,IAAI,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;gBAEvD,sBAAO,QAAQ,CAAC,IAAI,EAAC;;;KACtB,CAAC;AAlBW,QAAA,SAAS,aAkBpB;AAEF,SAAuB,kBAAkB,CACvC,IAAuC;;;;;;yBAEnC,CAAC,IAAI,EAAL,wBAAK;;wBAAE,iCAAO;;oBAEZ,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC1B,OAAO,GAAG,IAAI,WAAW,EAAE,CAAC;;;yBAE3B,IAAI;oBACe,6BAAM,MAAM,CAAC,IAAI,EAAE,GAAA;;oBAArC,KAAkB,SAAmB,EAAnC,KAAK,WAAA,EAAE,IAAI,UAAA;oBACnB,IAAI,IAAI;wBAAE,yBAAM;yBAEZ,KAAK,EAAL,wBAAK;;;;iDAEC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;wBAA3B,gCAA2B;;oBAA3B,SAA2B,CAAC;;;;oBAE5B,OAAO,CAAC,KAAK,CAAC,OAAK,CAAC,CAAC;;;;;;;CAI5B;AApBD,gDAoBC"}
+{"version":3,"file":"streams.js","sourceRoot":"","sources":["../../src/utils/streams.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAM,eAAe,GAAG;IACtB,cAAc,EAAE,kBAAkB;CACnC,CAAC;AAEF,IAAM,mBAAmB,GAAG,UAAC,KAAa,EAAE,OAAiC,EAAE,MAAgC;;IAC7G,OAAO,CAAC,KAAK,GAAG,MAAA,OAAO,CAAC,KAAK,mCAAI,EAAE,CAAC;IACnC,OAAO,CAAC,MAAM,CAAC,IAAI,CAA6B,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;IAEtE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEK,IAAM,SAAS,GAAG,UAAO,KAAa,EAAE,OAAiC,EAAE,MAAgC;;;;;gBAChH,OAAO,GAAG,mBAAmB,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;gBAEhD,MAAM,GAAG,GAAG,GAAG,IAAI,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;gBAElD,qBAAM,KAAK,CAAC,OAAO,CAAC,GAAG,GAAG,MAAM,EAAE;wBACjD,MAAM,EAAE,OAAO,CAAC,MAAM;wBACtB,OAAO,wBAAO,eAAe,GAAK,OAAO,CAAC,OAAO,CAAE;wBACnD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,UAAC,EAAE,EAAE,CAAC,IAAK,OAAA,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAA1B,CAA0B,CAAC;qBAC1E,CAAC,EAAA;;gBAJI,QAAQ,GAAG,SAIf;gBAEF,IAAI,CAAC,QAAQ,CAAC,EAAE;oBAAE,MAAM,IAAI,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;gBAEvD,sBAAO,QAAQ,CAAC,IAAI,EAAC;;;KACtB,CAAC;AAdW,QAAA,SAAS,aAcpB;AAEF,SAAuB,kBAAkB,CACvC,IAAuC;;;;;;yBAEnC,CAAC,IAAI,EAAL,wBAAK;;wBAAE,iCAAO;;oBAEZ,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;oBAC1B,OAAO,GAAG,IAAI,WAAW,EAAE,CAAC;;;yBAE3B,IAAI;oBACe,6BAAM,MAAM,CAAC,IAAI,EAAE,GAAA;;oBAArC,KAAkB,SAAmB,EAAnC,KAAK,WAAA,EAAE,IAAI,UAAA;oBACnB,IAAI,IAAI;wBAAE,yBAAM;yBAEZ,KAAK,EAAL,wBAAK;;;;iDAEC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC;wBAA3B,gCAA2B;;oBAA3B,SAA2B,CAAC;;;;oBAE5B,OAAO,CAAC,KAAK,CAAC,OAAK,CAAC,CAAC;;;;;;;CAI5B;AApBD,gDAoBC"}

package.json

 {
   "name": "@magicul/react-chat-stream",
   "description": "A React hook that lets you easily integrate your custom ChatGPT-like chat in React.",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "main": "dist/index.js",
@@ -35,20 +35,18 @@ "types": "dist/index.d.ts",
   "devDependencies": {
-    "@types/react": "^18.2.14",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.61.0",
-    "eslint": "8.46.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^3.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.1.6"
-  },
-  "dependencies": {
-    "uuid": "^9.0.0",
-    "@types/uuid": "^9.0.2"
+    "@types/react": "18.2.56",
+    "@typescript-eslint/eslint-plugin": "7.0.1",
+    "@typescript-eslint/parser": "7.0.1",
+    "eslint": "8.56.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-react": "7.33.2",
+    "prettier": "3.2.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.3.3"
   }
 }

src/hooks/useChatStream.ts

@@ -1,46 +0,28 @@
-import { ChangeEvent, Dispatch, FormEvent, SetStateAction, useState } from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
 import { decodeStreamToJson, getStream } from '../utils/streams';
-import { v4 as uuidv4 } from 'uuid';
+import { UseChatStreamChatMessage, UseChatStreamInput } from '../types';
 
 const BOT_ERROR_MESSAGE = 'Something went wrong fetching AI response.';
 
-type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-
-type ChatMessage = {
-  role: 'bot' | 'user';
-  content: string;
-  id: string;
-}
-
-export type UseChatStreamOptions = {
-  url: string;
-  method: HttpMethod;
-  query?: Record<string, string>;
-  headers?: HeadersInit;
-  body?: Record<string, string>;
-}
-
-export type UseChatStreamInputMethod = {
-  type: 'body' | 'query',
-  key: string;
-}
-
-type UseChatStreamInput = {
-  options: UseChatStreamOptions,
-  method: UseChatStreamInputMethod,
-};
-
 const useChatStream = (input: UseChatStreamInput) => {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [message, setMessage] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+  const [messages, setMessages] = useState<UseChatStreamChatMessage[]>([]);
+  const [formInput, setFormInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => {
-    setMessage(e.target.value);
+    setFormInput(e.target.value);
   };
 
-  const addMessageToChat = (message: string, role: ChatMessage['role'] = 'user') => {
-    setMessages(messages => [...messages, { role, content: message, id: uuidv4() }]);
+  const handleSubmit = async (e?: FormEvent<HTMLFormElement>) => {
+    e?.preventDefault();
+    await resetInputAndGetResponse();
   };
 
+  const addMessage = (message: Omit<UseChatStreamChatMessage, 'id'>) => {
+    const messageWithId = { ...message, id: crypto.randomUUID() as string };
+    setMessages(messages => [...messages, messageWithId]);
+
+    return messageWithId;
+  };
+
   const appendMessageToChat = (message: string) => {
@@ -59,34 +41,41 @@ setMessages(messages => {
     const stream = await getStream(message, input.options, input.method);
-    if (!stream) throw new Error();
+    const initialMessage = addMessage({ content: '', role: 'bot' });
+    let response = '';
 
-    addMessageToChat('', 'bot');
-
     for await (const message of decodeStreamToJson(stream)) {
       appendMessageToChat(message);
+      response += message;
     }
+
+    return { ...initialMessage, content: response };
   };
 
-  const handleSubmit = async (e?: FormEvent<HTMLFormElement>, newMessage?: string) => {
-    setIsLoading(true);
-    e?.preventDefault();
-    addMessageToChat(newMessage ?? message);
-    setMessage('');
+  const submitMessage = async (message: string) => resetInputAndGetResponse(message);
 
+  const resetInputAndGetResponse = async (message?: string) => {
+    setIsStreaming(true);
+    const addedMessage = addMessage({ content: message ?? formInput, role: 'user' });
+    await input.handlers.onMessageAdded?.(addedMessage);
+    setFormInput('');
+
     try {
-      await fetchAndUpdateAIResponse(newMessage ?? message);
+      const addedMessage = await fetchAndUpdateAIResponse(formInput);
+      await input.handlers.onMessageAdded?.(addedMessage);
     } catch {
-      addMessageToChat(BOT_ERROR_MESSAGE, 'bot');
+      const addedMessage = addMessage({ content: BOT_ERROR_MESSAGE, role: 'bot' });
+      await input.handlers.onMessageAdded?.(addedMessage);
+    } finally {
+      setIsStreaming(false);
     }
+  }
 
-    setIsLoading(false);
-  };
-
   return {
     messages,
     setMessages,
-    input: message,
-    setInput: setMessage,
+    input: formInput,
+    setInput: setFormInput,
     handleInputChange,
     handleSubmit,
-    isLoading,
+    submitMessage,
+    isStreaming,
   };
@@ -93,0 +82,0 @@ };

src/index.ts

 import useChatStream from './hooks/useChatStream';
 
+export * from './types';
 export default useChatStream;

src/utils/streams.ts

@@ -1,5 +0,2 @@
-import type {
-  UseChatStreamInputMethod,
-  UseChatStreamOptions
-} from '../hooks/useChatStream';
+import { UseChatStreamHttpOptions, UseChatStreamInputMethod } from '../types';
 
@@ -10,3 +7,3 @@ const DEFAULT_HEADERS = {
 
-const mergeInputInOptions = (input: string, options: UseChatStreamOptions, method: UseChatStreamInputMethod) => {
+const mergeInputInOptions = (input: string, options: UseChatStreamHttpOptions, method: UseChatStreamInputMethod) => {
   options.query = options.query ?? {};
@@ -18,14 +15,10 @@ (options[method.type] as Record<string, unknown>)[method.key] = input;
 
-export const getStream = async (input: string, options: UseChatStreamOptions, method: UseChatStreamInputMethod) => {
+export const getStream = async (input: string, options: UseChatStreamHttpOptions, method: UseChatStreamInputMethod) => {
   options = mergeInputInOptions(input, options, method);
 
   const params = '?' + new URLSearchParams(options.query).toString();
-  console.log(JSON.stringify(options.body, (_k, v) => v === null ? undefined : v));
 
   const response = await fetch(options.url + params, {
     method: options.method,
-    headers: {
-      ...DEFAULT_HEADERS,
-      ...options.headers
-    },
+    headers: { ...DEFAULT_HEADERS, ...options.headers },
     body: JSON.stringify(options.body, (_k, v) => v === null ? undefined : v)
@@ -32,0 +25,0 @@ });

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45025

23.14%

Dependency count

1

-66.67%

Number of package files

27

35%

Lines of code

664

32.53%

Worsened metrics

Dev dependency count

15

15.38%

Dependency changes

• - Removed

  @types/uuid@^9.0.2

• - Removed

  uuid@^9.0.0

• - Removed

  @types/uuid@9.0.8
  (transitive)

• - Removed

  uuid@9.0.1
  (transitive)