Issues with the example

[dragomirweb]

Hi, I recently tried to use the hook. It posts successfully but the event stream is empty? gpt3.5 and gpt4, Thanks and sorry for the short description ( seems to be an issue coming from the openai api )

[gardner]

I observe the same behavior. I tried to run with HTTPS which didn't change the behavior. There is an error thrown:

chat-hook.js:145 Error during chat response streaming TypeError: o[Symbol.iterator] is not a function
    at __asyncValues (chat-stream-handler.js:24:1)
    at chat-stream-handler.js:64:1
    at Generator.next (<anonymous>)
    at fulfilled (chat-stream-handler.js:4:1)

The network request tab shows the request taking 25s:

Event streams are empty:

Here is the HAR:

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.36"
    },
    "pages": [],
    "entries": [
      {
        "_initiator": {
          "type": "preflight",
          "url": "https://api.openai.com/v1/chat/completions",
          "requestId": "59205.10"
        },
        "_priority": "High",
        "_resourceType": "preflight",
        "cache": {},
        "request": {
          "method": "OPTIONS",
          "url": "https://api.openai.com/v1/chat/completions",
          "httpVersion": "h3",
          "headers": [
            {
              "name": ":authority",
              "value": "api.openai.com"
            },
            {
              "name": ":method",
              "value": "OPTIONS"
            },
            {
              "name": ":path",
              "value": "/v1/chat/completions"
            },
            {
              "name": ":scheme",
              "value": "https"
            },
            {
              "name": "accept",
              "value": "*/*"
            },
            {
              "name": "accept-encoding",
              "value": "gzip, deflate, br"
            },
            {
              "name": "accept-language",
              "value": "en-US,en;q=0.9,es;q=0.8"
            },
            {
              "name": "access-control-request-headers",
              "value": "authorization,content-type"
            },
            {
              "name": "access-control-request-method",
              "value": "POST"
            },
            {
              "name": "origin",
              "value": "https://localhost:3000"
            },
            {
              "name": "referer",
              "value": "https://localhost:3000/"
            },
            {
              "name": "sec-fetch-dest",
              "value": "empty"
            },
            {
              "name": "sec-fetch-mode",
              "value": "cors"
            },
            {
              "name": "sec-fetch-site",
              "value": "cross-site"
            },
            {
              "name": "user-agent",
              "value": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36"
            }
          ],
          "queryString": [],
          "cookies": [],
          "headersSize": -1,
          "bodySize": 0
        },
        "response": {
          "status": 200,
          "statusText": "",
          "httpVersion": "h3",
          "headers": [
            {
              "name": "access-control-allow-headers",
              "value": "authorization,content-type"
            },
            {
              "name": "access-control-allow-methods",
              "value": "GET, OPTIONS, POST"
            },
            {
              "name": "access-control-allow-origin",
              "value": "https://localhost:3000"
            },
            {
              "name": "alt-svc",
              "value": "h3=\":443\"; ma=86400, h3-29=\":443\"; ma=86400"
            },
            {
              "name": "cf-cache-status",
              "value": "DYNAMIC"
            },
            {
              "name": "cf-ray",
              "value": "7c5f45851970fb88-SFO"
            },
            {
              "name": "content-length",
              "value": "0"
            },
            {
              "name": "date",
              "value": "Fri, 12 May 2023 02:36:00 GMT"
            },
            {
              "name": "server",
              "value": "cloudflare"
            },
            {
              "name": "strict-transport-security",
              "value": "max-age=15724800; includeSubDomains"
            }
          ],
          "cookies": [],
          "content": {
            "size": 0,
            "mimeType": "x-unknown"
          },
          "redirectURL": "",
          "headersSize": -1,
          "bodySize": -1,
          "_transferSize": 0,
          "_error": null
        },
        "serverIPAddress": "104.18.6.192",
        "startedDateTime": "2023-05-12T02:35:59.647Z",
        "time": 1279.8030000011686,
        "timings": {
          "blocked": -0.702,
          "dns": 426.187,
          "ssl": 89.09200000000004,
          "connect": 515.657,
          "send": 0.9420000000000073,
          "wait": 333.52999999939937,
          "receive": 3.4870000017690472,
          "_blocked_queueing": -1
        }
      },
      {
        "_initiator": {
          "type": "script",
          "stack": {
            "callFrames": [
              {
                "functionName": "",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7705,
                "columnNumber": 25
              },
              {
                "functionName": "",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7638,
                "columnNumber": 66
              },
              {
                "functionName": "__awaiter",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7630,
                "columnNumber": 9
              },
              {
                "functionName": "openAiStreamingDataHandler",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7699,
                "columnNumber": 84
              },
              {
                "functionName": "",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7571,
                "columnNumber": 92
              },
              {
                "functionName": "",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7428,
                "columnNumber": 66
              },
              {
                "functionName": "__awaiter",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7410,
                "columnNumber": 9
              },
              {
                "functionName": "",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 7535,
                "columnNumber": 95
              },
              {
                "functionName": "onClick",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 343,
                "columnNumber": 21
              },
              {
                "functionName": "callCallback",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 11526,
                "columnNumber": 17
              },
              {
                "functionName": "invokeGuardedCallbackDev",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 11570,
                "columnNumber": 19
              },
              {
                "functionName": "invokeGuardedCallback",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 11627,
                "columnNumber": 34
              },
              {
                "functionName": "invokeGuardedCallbackAndCatchFirstError",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 11641,
                "columnNumber": 28
              },
              {
                "functionName": "executeDispatch",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 15785,
                "columnNumber": 6
              },
              {
                "functionName": "processDispatchQueueItemsInOrder",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 15611,
                "columnNumber": 10
              },
              {
                "functionName": "processDispatchQueue",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 15822,
                "columnNumber": 8
              },
              {
                "functionName": "dispatchEventsForPlugins",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 15831,
                "columnNumber": 6
              },
              {
                "functionName": "",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 15991,
                "columnNumber": 15
              },
              {
                "functionName": "batchedUpdates$1",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 30383,
                "columnNumber": 15
              },
              {
                "functionName": "batchedUpdates",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 11374,
                "columnNumber": 15
              },
              {
                "functionName": "dispatchEventForPluginEventSystem",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 15790,
                "columnNumber": 6
              },
              {
                "functionName": "dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 13496,
                "columnNumber": 8
              },
              {
                "functionName": "dispatchEvent",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 13490,
                "columnNumber": 8
              },
              {
                "functionName": "dispatchDiscreteEvent",
                "scriptId": "8",
                "url": "https://localhost:3000/static/js/bundle.js",
                "lineNumber": 13467,
                "columnNumber": 8
              }
            ]
          }
        },
        "_priority": "High",
        "_resourceType": "fetch",
        "cache": {},
        "request": {
          "method": "POST",
          "url": "https://api.openai.com/v1/chat/completions",
          "httpVersion": "h3",
          "headers": [
            {
              "name": ":authority",
              "value": "api.openai.com"
            },
            {
              "name": ":method",
              "value": "POST"
            },
            {
              "name": ":path",
              "value": "/v1/chat/completions"
            },
            {
              "name": ":scheme",
              "value": "https"
            },
            {
              "name": "accept",
              "value": "*/*"
            },
            {
              "name": "accept-encoding",
              "value": "gzip, deflate, br"
            },
            {
              "name": "accept-language",
              "value": "en-US,en;q=0.9,es;q=0.8"
            },
            {
              "name": "authorization",
              "value": "Bearer sk-SECRET"
            },
            {
              "name": "content-length",
              "value": "595"
            },
            {
              "name": "content-type",
              "value": "application/json"
            },
            {
              "name": "origin",
              "value": "https://localhost:3000"
            },
            {
              "name": "referer",
              "value": "https://localhost:3000/"
            },
            {
              "name": "sec-ch-ua",
              "value": "\"Google Chrome\";v=\"113\", \"Chromium\";v=\"113\", \"Not-A.Brand\";v=\"24\""
            },
            {
              "name": "sec-ch-ua-mobile",
              "value": "?0"
            },
            {
              "name": "sec-ch-ua-platform",
              "value": "\"Linux\""
            },
            {
              "name": "sec-fetch-dest",
              "value": "empty"
            },
            {
              "name": "sec-fetch-mode",
              "value": "cors"
            },
            {
              "name": "sec-fetch-site",
              "value": "cross-site"
            },
            {
              "name": "user-agent",
              "value": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36"
            }
          ],
          "queryString": [],
          "cookies": [],
          "headersSize": -1,
          "bodySize": 595,
          "postData": {
            "mimeType": "application/json",
            "text": "{\"model\":\"gpt-3.5-turbo\",\"temperature\":0.9,\"messages\":[{\"content\":\"You are a helpful nutritionist, you make recommendations to your clients about what they should eat based on what ingredients they have.\",\"role\":\"system\"},{\"content\":\"I have the following ingredients: 1 cup of flour, 1/2 cup of sugar, 1/2 cup of butter, 1/2 cup of milk, 1/2 cup of chocolate chips, 1/2 cup of cocoa powder, 1/2 cup of baking powder, 1/2 cup of baking soda, 1/2 cup of salt, 500g mushrooms\",\"role\":\"user\"},{\"content\":\"What should I make? Please provide three options with recipes.\",\"role\":\"user\"}],\"stream\":true}"
          }
        },
        "response": {
          "status": 200,
          "statusText": "",
          "httpVersion": "h3",
          "headers": [
            {
              "name": "access-control-allow-origin",
              "value": "https://localhost:3000"
            },
            {
              "name": "alt-svc",
              "value": "h3=\":443\"; ma=86400, h3-29=\":443\"; ma=86400"
            },
            {
              "name": "cache-control",
              "value": "no-cache, must-revalidate"
            },
            {
              "name": "cf-cache-status",
              "value": "DYNAMIC"
            },
            {
              "name": "cf-ray",
              "value": "7c5f45873c42fb88-SFO"
            },
            {
              "name": "content-type",
              "value": "text/event-stream"
            },
            {
              "name": "date",
              "value": "Fri, 12 May 2023 02:36:01 GMT"
            },
            {
              "name": "openai-model",
              "value": "gpt-3.5-turbo-0301"
            },
            {
              "name": "openai-organization",
              "value": "user-ORGANIZATION"
            },
            {
              "name": "openai-processing-ms",
              "value": "491"
            },
            {
              "name": "openai-version",
              "value": "2020-10-01"
            },
            {
              "name": "server",
              "value": "cloudflare"
            },
            {
              "name": "strict-transport-security",
              "value": "max-age=15724800; includeSubDomains"
            },
            {
              "name": "vary",
              "value": "Origin"
            },
            {
              "name": "x-ratelimit-limit-requests",
              "value": "3500"
            },
            {
              "name": "x-ratelimit-limit-tokens",
              "value": "90000"
            },
            {
              "name": "x-ratelimit-remaining-requests",
              "value": "3499"
            },
            {
              "name": "x-ratelimit-remaining-tokens",
              "value": "89872"
            },
            {
              "name": "x-ratelimit-reset-requests",
              "value": "17ms"
            },
            {
              "name": "x-ratelimit-reset-tokens",
              "value": "85ms"
            },
            {
              "name": "x-request-id",
              "value": "23c08f364ad14db6bb2e371d528f8fc1"
            }
          ],
          "cookies": [],
          "content": {
            "size": 133102,
            "mimeType": "text/event-stream"
          },
          "redirectURL": "",
          "headersSize": -1,
          "bodySize": -1,
          "_transferSize": 135499,
          "_error": null
        },
        "serverIPAddress": "104.18.6.192",
        "startedDateTime": "2023-05-12T02:35:59.643Z",
        "time": 49203.32399999825,
        "timings": {
          "blocked": 859.2199999995283,
          "dns": -1,
          "ssl": -1,
          "connect": -1,
          "send": 0.2270000000000001,
          "wait": 812.6530000002447,
          "receive": 47531.223999998474,
          "_blocked_queueing": 858.2559999995283
        }
      }
    ]
  }
}

[gardner]

It appears to occur on line 64 of the transpiled js and here in the TypeScript.

[brycedorn]

Seeing the same issue as @gardner, after bisecting this commit (6f26d22) is the culprit. Browser support for ReadableStream async iterable is not the best (I'm using Chrome):

@jonrhall could this project revert to using SSE instead re: above?