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

Comparing version 0.3.1 to 0.4.0

dist/hooks/useChatStream.js

@@ -102,7 +102,9 @@ "use strict";
     var fetchAndUpdateAIResponse = function (message) { return __awaiter(void 0, void 0, void 0, function () {
-        var stream, initialMessage, response, _a, _b, _c, message_1, e_1_1;
+        var charactersPerSecond, stream, initialMessage, response, _a, _b, _c, chunk, _i, chunk_1, char, e_1_1;
         var _d, e_1, _e, _f;
         return __generator(this, function (_g) {
             switch (_g.label) {
-                case 0: return [4 /*yield*/, (0, streams_1.getStream)(message, input.options, input.method)];
+                case 0:
+                    charactersPerSecond = input.options.fakeCharactersPerSecond;
+                    return [4 /*yield*/, (0, streams_1.getStream)(message, input.options, input.method)];
                 case 1:
@@ -114,3 +116,3 @@ stream = _g.sent();
                 case 2:
-                    _g.trys.push([2, 7, 8, 13]);
+                    _g.trys.push([2, 10, 11, 16]);
                     _a = true, _b = __asyncValues((0, streams_1.decodeStreamToJson)(stream));
@@ -120,30 +122,47 @@ _g.label = 3;
                 case 4:
-                    if (!(_c = _g.sent(), _d = _c.done, !_d)) return [3 /*break*/, 6];
+                    if (!(_c = _g.sent(), _d = _c.done, !_d)) return [3 /*break*/, 9];
                     _f = _c.value;
                     _a = false;
-                    message_1 = _f;
-                    appendMessageToChat(message_1);
-                    response += message_1;
+                    chunk = _f;
+                    if (!charactersPerSecond) {
+                        appendMessageToChat(chunk);
+                        response += chunk;
+                        return [3 /*break*/, 8];
+                    }
+                    _i = 0, chunk_1 = chunk;
                     _g.label = 5;
                 case 5:
+                    if (!(_i < chunk_1.length)) return [3 /*break*/, 8];
+                    char = chunk_1[_i];
+                    appendMessageToChat(char);
+                    response += char;
+                    if (!(charactersPerSecond > 0)) return [3 /*break*/, 7];
+                    return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, 1000 / charactersPerSecond); })];
+                case 6:
+                    _g.sent();
+                    _g.label = 7;
+                case 7:
+                    _i++;
+                    return [3 /*break*/, 5];
+                case 8:
                     _a = true;
                     return [3 /*break*/, 3];
-                case 6: return [3 /*break*/, 13];
-                case 7:
+                case 9: return [3 /*break*/, 16];
+                case 10:
                     e_1_1 = _g.sent();
                     e_1 = { error: e_1_1 };
-                    return [3 /*break*/, 13];
-                case 8:
-                    _g.trys.push([8, , 11, 12]);
-                    if (!(!_a && !_d && (_e = _b.return))) return [3 /*break*/, 10];
+                    return [3 /*break*/, 16];
+                case 11:
+                    _g.trys.push([11, , 14, 15]);
+                    if (!(!_a && !_d && (_e = _b.return))) return [3 /*break*/, 13];
                     return [4 /*yield*/, _e.call(_b)];
-                case 9:
+                case 12:
                     _g.sent();
-                    _g.label = 10;
-                case 10: return [3 /*break*/, 12];
-                case 11:
+                    _g.label = 13;
+                case 13: return [3 /*break*/, 15];
+                case 14:
                     if (e_1) throw e_1.error;
                     return [7 /*endfinally*/];
-                case 12: return [7 /*endfinally*/];
-                case 13: return [2 /*return*/, __assign(__assign({}, initialMessage), { content: response })];
+                case 15: return [7 /*endfinally*/];
+                case 16: return [2 /*return*/, __assign(__assign({}, initialMessage), { content: response })];
             }
@@ -150,0 +169,0 @@ });

dist/types.d.ts

@@ -9,3 +9,3 @@ import useChatStream from './hooks/useChatStream';
 };
-export type UseChatStreamHttpOptions = {
+export type UseChatStreamOptions = {
     url: string;
@@ -16,2 +16,3 @@ method: HttpMethod;
     body?: Record<string, string>;
+    fakeCharactersPerSecond?: number;
 };
@@ -26,3 +27,3 @@ export type UseChatStreamEventHandlers = {
 export type UseChatStreamInput = {
-    options: UseChatStreamHttpOptions;
+    options: UseChatStreamOptions;
     method: UseChatStreamInputMethod;
@@ -29,0 +30,0 @@ handlers: UseChatStreamEventHandlers;

dist/utils/streams.d.ts

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

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.3.1",
+  "version": "0.4.0",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

README.md

@@ -116,2 +116,4 @@ # @magicul/react-chat-stream
 - body: `object (optional)` - the body of the request.
+- fakeCharactersPerSecond: `number (optional)` - the number of
+  characters to display per second. If this is unused the hook will display the messages as they come in.
 
@@ -118,0 +120,0 @@ #### method

src/hooks/useChatStream.ts

@@ -40,2 +40,3 @@ import { ChangeEvent, FormEvent, useState } from 'react';
   const fetchAndUpdateAIResponse = async (message: string) => {
+    const charactersPerSecond = input.options.fakeCharactersPerSecond;
     const stream = await getStream(message, input.options, input.method);
@@ -45,5 +46,18 @@ const initialMessage = addMessage({ content: '', role: 'bot' });
 
-    for await (const message of decodeStreamToJson(stream)) {
-      appendMessageToChat(message);
-      response += message;
+    for await (const chunk of decodeStreamToJson(stream)) {
+      if (!charactersPerSecond) {
+        appendMessageToChat(chunk);
+        response += chunk;
+        continue;
+      }
+
+      // Stream characters one by one based on the characters per second that is set.
+      for (const char of chunk) {
+        appendMessageToChat(char);
+        response += char;
+
+        if (charactersPerSecond > 0) {
+          await new Promise(resolve => setTimeout(resolve, 1000 / charactersPerSecond));
+        }
+      }
     }
@@ -50,0 +64,0 @@

src/types.ts

@@ -13,3 +13,3 @@ import useChatStream from './hooks/useChatStream';
 
-export type UseChatStreamHttpOptions = {
+export type UseChatStreamOptions = {
   url: string;
@@ -20,2 +20,3 @@ method: HttpMethod;
   body?: Record<string, string>;
+  fakeCharactersPerSecond?: number;
 }
@@ -33,7 +34,7 @@
 export type UseChatStreamInput = {
-  options: UseChatStreamHttpOptions,
+  options: UseChatStreamOptions,
   method: UseChatStreamInputMethod,
-  handlers: UseChatStreamEventHandlers
+  handlers: UseChatStreamEventHandlers,
 };
 
-export type UseChatStreamResult = ReturnType<typeof useChatStream>;
+export type UseChatStreamResult = ReturnType<typeof useChatStream>;

src/utils/streams.ts

@@ -1,2 +0,2 @@
-import { UseChatStreamHttpOptions, UseChatStreamInputMethod } from '../types';
+import { UseChatStreamOptions, UseChatStreamInputMethod } from '../types';
 
@@ -7,3 +7,3 @@ const DEFAULT_HEADERS = {
 
-const mergeInputInOptions = (input: string, options: UseChatStreamHttpOptions, method: UseChatStreamInputMethod) => {
+const mergeInputInOptions = (input: string, options: UseChatStreamOptions, method: UseChatStreamInputMethod) => {
   options.query = options.query ?? {};
@@ -15,3 +15,3 @@ (options[method.type] as Record<string, unknown>)[method.key] = input;
 
-export const getStream = async (input: string, options: UseChatStreamHttpOptions, method: UseChatStreamInputMethod) => {
+export const getStream = async (input: string, options: UseChatStreamOptions, method: UseChatStreamInputMethod) => {
   options = mergeInputInOptions(input, options, method);
@@ -18,0 +18,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47161

increased by4.53%

Lines of code

698

increased by5.12%

Number of lines in readme file

163

increased by1.24%

No dependency changes