llmasaservice-ui 0.10.3 → 0.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +95 -155
  2. package/dist/index.mjs +102 -156
  3. package/package.json +1 -1
  4. package/src/ChatPanel.tsx +100 -156
package/dist/index.js CHANGED
@@ -292,6 +292,66 @@ var ChatPanel = ({
292
292
  const [currentCustomer, setCurrentCustomer] = (0, import_react2.useState)(customer);
293
293
  const [allActions, setAllActions] = (0, import_react2.useState)([]);
294
294
  const responseAreaRef = (0, import_react2.useRef)(null);
295
+ const browserInfo = (0, import_react2.useMemo)(() => getBrowserInfo(), []);
296
+ const dataWithExtras = (0, import_react2.useMemo)(() => {
297
+ var _a2, _b, _c, _d;
298
+ return [
299
+ ...data,
300
+ { key: "--customer_id", data: (_a2 = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _a2 : "" },
301
+ {
302
+ key: "--customer_name",
303
+ data: (_b = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _b : ""
304
+ },
305
+ {
306
+ key: "--customer_user_id",
307
+ data: (_c = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _c : ""
308
+ },
309
+ {
310
+ key: "--customer_user_email",
311
+ data: (_d = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _d : ""
312
+ },
313
+ { key: "--email", data: emailInput != null ? emailInput : "" },
314
+ { key: "--emailValid", data: emailValid ? "true" : "false" },
315
+ {
316
+ key: "--emailInputSet",
317
+ data: emailInputSet ? "true" : "false"
318
+ },
319
+ {
320
+ key: "--emailPanelShowing",
321
+ data: showEmailPanel ? "true" : "false"
322
+ },
323
+ {
324
+ key: "--callToActionSent",
325
+ data: callToActionSent ? "true" : "false"
326
+ },
327
+ {
328
+ key: "--CTAClickedButNoEmail",
329
+ data: CTAClickedButNoEmail ? "true" : "false"
330
+ },
331
+ { key: "--emailSent", data: emailSent ? "true" : "false" },
332
+ {
333
+ key: "--emailClickedButNoEmail",
334
+ data: emailClickedButNoEmail ? "true" : "false"
335
+ },
336
+ {
337
+ key: "--currentTimeUTC",
338
+ data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC
339
+ },
340
+ { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
341
+ { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
342
+ ];
343
+ }, [
344
+ data,
345
+ currentCustomer,
346
+ emailInput,
347
+ emailValid,
348
+ emailInputSet,
349
+ showEmailPanel,
350
+ callToActionSent,
351
+ CTAClickedButNoEmail,
352
+ emailSent,
353
+ emailClickedButNoEmail
354
+ ]);
295
355
  let publicAPIUrl = "https://api.llmasaservice.io";
296
356
  if (window.location.hostname === "localhost" || window.location.hostname === "dev.llmasaservice.io") {
297
357
  publicAPIUrl = "https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev";
@@ -415,7 +475,7 @@ var ChatPanel = ({
415
475
  }, [cssUrl]);
416
476
  const toolUseCallback = (0, import_react2.useCallback)(
417
477
  (match, groups) => __async(void 0, null, function* () {
418
- var _a2, _b, _c, _d, _e, _f;
478
+ var _a2, _b;
419
479
  for (const client of mcpClients) {
420
480
  console.log("tool", groups[1]);
421
481
  console.log("input", groups[2]);
@@ -463,61 +523,16 @@ var ChatPanel = ({
463
523
  ],
464
524
  tool_call_id: groups[0]
465
525
  });
466
- const browserInfo = getBrowserInfo();
526
+ const browserInfo2 = getBrowserInfo();
467
527
  send(
468
528
  "",
469
529
  messagesAndHistory,
470
530
  [
471
- ...data,
472
- {
473
- key: "--customer_id",
474
- data: (_c = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _c : ""
475
- },
476
- {
477
- key: "--customer_name",
478
- data: (_d = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _d : ""
479
- },
480
- {
481
- key: "--customer_user_id",
482
- data: (_e = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _e : ""
483
- },
484
- {
485
- key: "--customer_user_email",
486
- data: (_f = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _f : ""
487
- },
488
- { key: "--email", data: emailInput != null ? emailInput : "" },
489
- { key: "--emailValid", data: emailValid ? "true" : "false" },
490
- {
491
- key: "--emailInputSet",
492
- data: emailInputSet ? "true" : "false"
493
- },
494
- {
495
- key: "--emailPanelShowing",
496
- data: showEmailPanel ? "true" : "false"
497
- },
498
- {
499
- key: "--callToActionSent",
500
- data: callToActionSent ? "true" : "false"
501
- },
502
- {
503
- key: "--CTAClickedButNoEmail",
504
- data: CTAClickedButNoEmail ? "true" : "false"
505
- },
506
- { key: "--emailSent", data: emailSent ? "true" : "false" },
507
- {
508
- key: "--emailClickedButNoEmail",
509
- data: emailClickedButNoEmail ? "true" : "false"
510
- },
531
+ ...dataWithExtras,
511
532
  {
512
533
  key: "--messages",
513
534
  data: messagesAndHistory.length.toString()
514
- },
515
- {
516
- key: "--currentTimeUTC",
517
- data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC
518
- },
519
- { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
520
- { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
535
+ }
521
536
  ],
522
537
  true,
523
538
  true,
@@ -545,25 +560,25 @@ var ChatPanel = ({
545
560
  currentConversation
546
561
  ]
547
562
  );
563
+ const anthropic_toolAction = {
564
+ pattern: '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[^}]+\\}),"service":"([^"]+)"\\}',
565
+ type: "button",
566
+ markdown: "Approve Tool Use: $2",
567
+ callback: toolUseCallback
568
+ };
569
+ const openAI_toolAction = {
570
+ pattern: '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
571
+ type: "button",
572
+ markdown: "Approve Tool Use: $2",
573
+ callback: toolUseCallback
574
+ };
575
+ const google_toolAction = {
576
+ pattern: '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[^}]+\\})\\s*\\}\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
577
+ type: "button",
578
+ markdown: "Approve Tool Use: $2",
579
+ callback: toolUseCallback
580
+ };
548
581
  (0, import_react2.useEffect)(() => {
549
- const anthropic_toolAction = {
550
- pattern: '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[^}]+\\}),"service":"([^"]+)"\\}',
551
- type: "button",
552
- markdown: "Approve Tool Use: $2",
553
- callback: toolUseCallback
554
- };
555
- const openAI_toolAction = {
556
- pattern: '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
557
- type: "button",
558
- markdown: "Approve Tool Use: $2",
559
- callback: toolUseCallback
560
- };
561
- const google_toolAction = {
562
- pattern: '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[^}]+\\})\\s*\\}\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
563
- type: "button",
564
- markdown: "Approve Tool Use: $2",
565
- callback: toolUseCallback
566
- };
567
582
  setAllActions([
568
583
  ...actions,
569
584
  anthropic_toolAction,
@@ -624,7 +639,7 @@ var ChatPanel = ({
624
639
  });
625
640
  });
626
641
  }
627
- }, [response]);
642
+ }, [response, allActions, lastKey, lastCallId, messages.length]);
628
643
  function hasVerticalScrollbar(element) {
629
644
  return element.scrollHeight > element.clientHeight;
630
645
  }
@@ -649,58 +664,17 @@ var ChatPanel = ({
649
664
  if (initialPrompt !== lastPrompt) {
650
665
  setIsLoading(true);
651
666
  ensureConversation().then((convId) => {
652
- var _a2, _b, _c, _d;
653
667
  if (lastController) stop(lastController);
654
668
  const controller = new AbortController();
655
- const browserInfo = getBrowserInfo();
656
669
  send(
657
670
  initialPrompt,
658
671
  messages,
659
672
  [
660
- ...data,
661
- {
662
- key: "--customer_id",
663
- data: (_a2 = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _a2 : ""
664
- },
665
- {
666
- key: "--customer_name",
667
- data: (_b = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _b : ""
668
- },
673
+ ...dataWithExtras,
669
674
  {
670
- key: "--customer_user_id",
671
- data: (_c = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _c : ""
672
- },
673
- {
674
- key: "--customer_user_email",
675
- data: (_d = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _d : ""
676
- },
677
- { key: "--email", data: emailInput != null ? emailInput : "" },
678
- { key: "--emailValid", data: emailValid ? "true" : "false" },
679
- {
680
- key: "--emailInputSet",
681
- data: emailInputSet ? "true" : "false"
682
- },
683
- {
684
- key: "--emailPanelShowing",
685
- data: showEmailPanel ? "true" : "false"
686
- },
687
- {
688
- key: "--callToActionSent",
689
- data: callToActionSent ? "true" : "false"
690
- },
691
- {
692
- key: "--CTAClickedButNoEmail",
693
- data: CTAClickedButNoEmail ? "true" : "false"
694
- },
695
- { key: "--emailSent", data: emailSent ? "true" : "false" },
696
- {
697
- key: "--emailClickedButNoEmail",
698
- data: emailClickedButNoEmail ? "true" : "false"
699
- },
700
- { key: "--messages", data: messages.length.toString() },
701
- { key: "--currentTimeUTC", data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC },
702
- { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
703
- { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
675
+ key: "--messages",
676
+ data: messages.length.toString()
677
+ }
704
678
  ],
705
679
  true,
706
680
  true,
@@ -774,7 +748,7 @@ var ChatPanel = ({
774
748
  const ensureConversation = () => {
775
749
  var _a2, _b;
776
750
  if ((!currentConversation || currentConversation === "") && createConversationOnFirstChat) {
777
- const browserInfo = getBrowserInfo();
751
+ const browserInfo2 = getBrowserInfo();
778
752
  return fetch(`${publicAPIUrl}/conversations`, {
779
753
  method: "POST",
780
754
  headers: {
@@ -785,8 +759,8 @@ var ChatPanel = ({
785
759
  agentId: agent,
786
760
  customerId: (_a2 = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _a2 : null,
787
761
  customerEmail: (_b = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _b : null,
788
- timezone: browserInfo == null ? void 0 : browserInfo.userTimezone,
789
- language: browserInfo == null ? void 0 : browserInfo.userLanguage
762
+ timezone: browserInfo2 == null ? void 0 : browserInfo2.userTimezone,
763
+ language: browserInfo2 == null ? void 0 : browserInfo2.userLanguage
790
764
  })
791
765
  }).then((res) => __async(void 0, null, function* () {
792
766
  if (!res.ok) {
@@ -871,7 +845,7 @@ var ChatPanel = ({
871
845
  const continueChat = (suggestion) => {
872
846
  console.log("continueChat", suggestion);
873
847
  ensureConversation().then((convId) => {
874
- var _a2, _b, _c, _d, _e, _f, _g, _h;
848
+ var _a2, _b, _c, _d;
875
849
  console.log("current customer", currentCustomer);
876
850
  if (!idle) {
877
851
  stop(lastController);
@@ -944,50 +918,16 @@ var ChatPanel = ({
944
918
  }
945
919
  }
946
920
  console.log("Sending for conversation", convId);
947
- const browserInfo = getBrowserInfo();
948
921
  const controller = new AbortController();
949
922
  send(
950
923
  nextPromptToSend,
951
924
  messagesAndHistory,
952
925
  [
953
- ...data,
954
- { key: "--customer_id", data: (_e = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _e : "" },
926
+ ...dataWithExtras,
955
927
  {
956
- key: "--customer_name",
957
- data: (_f = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _f : ""
958
- },
959
- {
960
- key: "--customer_user_id",
961
- data: (_g = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _g : ""
962
- },
963
- {
964
- key: "--customer_user_email",
965
- data: (_h = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _h : ""
966
- },
967
- { key: "--email", data: emailInput != null ? emailInput : "" },
968
- { key: "--emailValid", data: emailValid ? "true" : "false" },
969
- { key: "--emailInputSet", data: emailInputSet ? "true" : "false" },
970
- {
971
- key: "--emailPanelShowing",
972
- data: showEmailPanel ? "true" : "false"
973
- },
974
- {
975
- key: "--callToActionSent",
976
- data: callToActionSent ? "true" : "false"
977
- },
978
- {
979
- key: "--CTAClickedButNoEmail",
980
- data: CTAClickedButNoEmail ? "true" : "false"
981
- },
982
- { key: "--emailSent", data: emailSent ? "true" : "false" },
983
- {
984
- key: "--emailClickedButNoEmail",
985
- data: emailClickedButNoEmail ? "true" : "false"
986
- },
987
- { key: "--messages", data: messagesAndHistory.length.toString() },
988
- { key: "--currentTimeUTC", data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC },
989
- { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
990
- { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
928
+ key: "--messages",
929
+ data: messagesAndHistory.length.toString()
930
+ }
991
931
  ],
992
932
  true,
993
933
  true,
package/dist/index.mjs CHANGED
@@ -52,7 +52,13 @@ var __async = (__this, __arguments, generator) => {
52
52
 
53
53
  // src/ChatPanel.tsx
54
54
  import { useLLM } from "llmasaservice-client";
55
- import React2, { useCallback, useEffect, useRef, useState as useState2 } from "react";
55
+ import React2, {
56
+ useCallback,
57
+ useEffect,
58
+ useMemo,
59
+ useRef,
60
+ useState as useState2
61
+ } from "react";
56
62
  import ReactMarkdown from "react-markdown";
57
63
  import rehypeRaw from "rehype-raw";
58
64
  import ReactDOMServer from "react-dom/server";
@@ -258,6 +264,66 @@ var ChatPanel = ({
258
264
  const [currentCustomer, setCurrentCustomer] = useState2(customer);
259
265
  const [allActions, setAllActions] = useState2([]);
260
266
  const responseAreaRef = useRef(null);
267
+ const browserInfo = useMemo(() => getBrowserInfo(), []);
268
+ const dataWithExtras = useMemo(() => {
269
+ var _a2, _b, _c, _d;
270
+ return [
271
+ ...data,
272
+ { key: "--customer_id", data: (_a2 = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _a2 : "" },
273
+ {
274
+ key: "--customer_name",
275
+ data: (_b = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _b : ""
276
+ },
277
+ {
278
+ key: "--customer_user_id",
279
+ data: (_c = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _c : ""
280
+ },
281
+ {
282
+ key: "--customer_user_email",
283
+ data: (_d = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _d : ""
284
+ },
285
+ { key: "--email", data: emailInput != null ? emailInput : "" },
286
+ { key: "--emailValid", data: emailValid ? "true" : "false" },
287
+ {
288
+ key: "--emailInputSet",
289
+ data: emailInputSet ? "true" : "false"
290
+ },
291
+ {
292
+ key: "--emailPanelShowing",
293
+ data: showEmailPanel ? "true" : "false"
294
+ },
295
+ {
296
+ key: "--callToActionSent",
297
+ data: callToActionSent ? "true" : "false"
298
+ },
299
+ {
300
+ key: "--CTAClickedButNoEmail",
301
+ data: CTAClickedButNoEmail ? "true" : "false"
302
+ },
303
+ { key: "--emailSent", data: emailSent ? "true" : "false" },
304
+ {
305
+ key: "--emailClickedButNoEmail",
306
+ data: emailClickedButNoEmail ? "true" : "false"
307
+ },
308
+ {
309
+ key: "--currentTimeUTC",
310
+ data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC
311
+ },
312
+ { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
313
+ { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
314
+ ];
315
+ }, [
316
+ data,
317
+ currentCustomer,
318
+ emailInput,
319
+ emailValid,
320
+ emailInputSet,
321
+ showEmailPanel,
322
+ callToActionSent,
323
+ CTAClickedButNoEmail,
324
+ emailSent,
325
+ emailClickedButNoEmail
326
+ ]);
261
327
  let publicAPIUrl = "https://api.llmasaservice.io";
262
328
  if (window.location.hostname === "localhost" || window.location.hostname === "dev.llmasaservice.io") {
263
329
  publicAPIUrl = "https://8ftw8droff.execute-api.us-east-1.amazonaws.com/dev";
@@ -381,7 +447,7 @@ var ChatPanel = ({
381
447
  }, [cssUrl]);
382
448
  const toolUseCallback = useCallback(
383
449
  (match, groups) => __async(void 0, null, function* () {
384
- var _a2, _b, _c, _d, _e, _f;
450
+ var _a2, _b;
385
451
  for (const client of mcpClients) {
386
452
  console.log("tool", groups[1]);
387
453
  console.log("input", groups[2]);
@@ -429,61 +495,16 @@ var ChatPanel = ({
429
495
  ],
430
496
  tool_call_id: groups[0]
431
497
  });
432
- const browserInfo = getBrowserInfo();
498
+ const browserInfo2 = getBrowserInfo();
433
499
  send(
434
500
  "",
435
501
  messagesAndHistory,
436
502
  [
437
- ...data,
438
- {
439
- key: "--customer_id",
440
- data: (_c = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _c : ""
441
- },
442
- {
443
- key: "--customer_name",
444
- data: (_d = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _d : ""
445
- },
446
- {
447
- key: "--customer_user_id",
448
- data: (_e = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _e : ""
449
- },
450
- {
451
- key: "--customer_user_email",
452
- data: (_f = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _f : ""
453
- },
454
- { key: "--email", data: emailInput != null ? emailInput : "" },
455
- { key: "--emailValid", data: emailValid ? "true" : "false" },
456
- {
457
- key: "--emailInputSet",
458
- data: emailInputSet ? "true" : "false"
459
- },
460
- {
461
- key: "--emailPanelShowing",
462
- data: showEmailPanel ? "true" : "false"
463
- },
464
- {
465
- key: "--callToActionSent",
466
- data: callToActionSent ? "true" : "false"
467
- },
468
- {
469
- key: "--CTAClickedButNoEmail",
470
- data: CTAClickedButNoEmail ? "true" : "false"
471
- },
472
- { key: "--emailSent", data: emailSent ? "true" : "false" },
473
- {
474
- key: "--emailClickedButNoEmail",
475
- data: emailClickedButNoEmail ? "true" : "false"
476
- },
503
+ ...dataWithExtras,
477
504
  {
478
505
  key: "--messages",
479
506
  data: messagesAndHistory.length.toString()
480
- },
481
- {
482
- key: "--currentTimeUTC",
483
- data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC
484
- },
485
- { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
486
- { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
507
+ }
487
508
  ],
488
509
  true,
489
510
  true,
@@ -511,25 +532,25 @@ var ChatPanel = ({
511
532
  currentConversation
512
533
  ]
513
534
  );
535
+ const anthropic_toolAction = {
536
+ pattern: '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[^}]+\\}),"service":"([^"]+)"\\}',
537
+ type: "button",
538
+ markdown: "Approve Tool Use: $2",
539
+ callback: toolUseCallback
540
+ };
541
+ const openAI_toolAction = {
542
+ pattern: '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
543
+ type: "button",
544
+ markdown: "Approve Tool Use: $2",
545
+ callback: toolUseCallback
546
+ };
547
+ const google_toolAction = {
548
+ pattern: '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[^}]+\\})\\s*\\}\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
549
+ type: "button",
550
+ markdown: "Approve Tool Use: $2",
551
+ callback: toolUseCallback
552
+ };
514
553
  useEffect(() => {
515
- const anthropic_toolAction = {
516
- pattern: '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[^}]+\\}),"service":"([^"]+)"\\}',
517
- type: "button",
518
- markdown: "Approve Tool Use: $2",
519
- callback: toolUseCallback
520
- };
521
- const openAI_toolAction = {
522
- pattern: '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
523
- type: "button",
524
- markdown: "Approve Tool Use: $2",
525
- callback: toolUseCallback
526
- };
527
- const google_toolAction = {
528
- pattern: '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[^}]+\\})\\s*\\}\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
529
- type: "button",
530
- markdown: "Approve Tool Use: $2",
531
- callback: toolUseCallback
532
- };
533
554
  setAllActions([
534
555
  ...actions,
535
556
  anthropic_toolAction,
@@ -590,7 +611,7 @@ var ChatPanel = ({
590
611
  });
591
612
  });
592
613
  }
593
- }, [response]);
614
+ }, [response, allActions, lastKey, lastCallId, messages.length]);
594
615
  function hasVerticalScrollbar(element) {
595
616
  return element.scrollHeight > element.clientHeight;
596
617
  }
@@ -615,58 +636,17 @@ var ChatPanel = ({
615
636
  if (initialPrompt !== lastPrompt) {
616
637
  setIsLoading(true);
617
638
  ensureConversation().then((convId) => {
618
- var _a2, _b, _c, _d;
619
639
  if (lastController) stop(lastController);
620
640
  const controller = new AbortController();
621
- const browserInfo = getBrowserInfo();
622
641
  send(
623
642
  initialPrompt,
624
643
  messages,
625
644
  [
626
- ...data,
627
- {
628
- key: "--customer_id",
629
- data: (_a2 = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _a2 : ""
630
- },
631
- {
632
- key: "--customer_name",
633
- data: (_b = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _b : ""
634
- },
645
+ ...dataWithExtras,
635
646
  {
636
- key: "--customer_user_id",
637
- data: (_c = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _c : ""
638
- },
639
- {
640
- key: "--customer_user_email",
641
- data: (_d = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _d : ""
642
- },
643
- { key: "--email", data: emailInput != null ? emailInput : "" },
644
- { key: "--emailValid", data: emailValid ? "true" : "false" },
645
- {
646
- key: "--emailInputSet",
647
- data: emailInputSet ? "true" : "false"
648
- },
649
- {
650
- key: "--emailPanelShowing",
651
- data: showEmailPanel ? "true" : "false"
652
- },
653
- {
654
- key: "--callToActionSent",
655
- data: callToActionSent ? "true" : "false"
656
- },
657
- {
658
- key: "--CTAClickedButNoEmail",
659
- data: CTAClickedButNoEmail ? "true" : "false"
660
- },
661
- { key: "--emailSent", data: emailSent ? "true" : "false" },
662
- {
663
- key: "--emailClickedButNoEmail",
664
- data: emailClickedButNoEmail ? "true" : "false"
665
- },
666
- { key: "--messages", data: messages.length.toString() },
667
- { key: "--currentTimeUTC", data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC },
668
- { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
669
- { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
647
+ key: "--messages",
648
+ data: messages.length.toString()
649
+ }
670
650
  ],
671
651
  true,
672
652
  true,
@@ -740,7 +720,7 @@ var ChatPanel = ({
740
720
  const ensureConversation = () => {
741
721
  var _a2, _b;
742
722
  if ((!currentConversation || currentConversation === "") && createConversationOnFirstChat) {
743
- const browserInfo = getBrowserInfo();
723
+ const browserInfo2 = getBrowserInfo();
744
724
  return fetch(`${publicAPIUrl}/conversations`, {
745
725
  method: "POST",
746
726
  headers: {
@@ -751,8 +731,8 @@ var ChatPanel = ({
751
731
  agentId: agent,
752
732
  customerId: (_a2 = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _a2 : null,
753
733
  customerEmail: (_b = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _b : null,
754
- timezone: browserInfo == null ? void 0 : browserInfo.userTimezone,
755
- language: browserInfo == null ? void 0 : browserInfo.userLanguage
734
+ timezone: browserInfo2 == null ? void 0 : browserInfo2.userTimezone,
735
+ language: browserInfo2 == null ? void 0 : browserInfo2.userLanguage
756
736
  })
757
737
  }).then((res) => __async(void 0, null, function* () {
758
738
  if (!res.ok) {
@@ -837,7 +817,7 @@ var ChatPanel = ({
837
817
  const continueChat = (suggestion) => {
838
818
  console.log("continueChat", suggestion);
839
819
  ensureConversation().then((convId) => {
840
- var _a2, _b, _c, _d, _e, _f, _g, _h;
820
+ var _a2, _b, _c, _d;
841
821
  console.log("current customer", currentCustomer);
842
822
  if (!idle) {
843
823
  stop(lastController);
@@ -910,50 +890,16 @@ var ChatPanel = ({
910
890
  }
911
891
  }
912
892
  console.log("Sending for conversation", convId);
913
- const browserInfo = getBrowserInfo();
914
893
  const controller = new AbortController();
915
894
  send(
916
895
  nextPromptToSend,
917
896
  messagesAndHistory,
918
897
  [
919
- ...data,
920
- { key: "--customer_id", data: (_e = currentCustomer == null ? void 0 : currentCustomer.customer_id) != null ? _e : "" },
898
+ ...dataWithExtras,
921
899
  {
922
- key: "--customer_name",
923
- data: (_f = currentCustomer == null ? void 0 : currentCustomer.customer_name) != null ? _f : ""
924
- },
925
- {
926
- key: "--customer_user_id",
927
- data: (_g = currentCustomer == null ? void 0 : currentCustomer.customer_user_id) != null ? _g : ""
928
- },
929
- {
930
- key: "--customer_user_email",
931
- data: (_h = currentCustomer == null ? void 0 : currentCustomer.customer_user_email) != null ? _h : ""
932
- },
933
- { key: "--email", data: emailInput != null ? emailInput : "" },
934
- { key: "--emailValid", data: emailValid ? "true" : "false" },
935
- { key: "--emailInputSet", data: emailInputSet ? "true" : "false" },
936
- {
937
- key: "--emailPanelShowing",
938
- data: showEmailPanel ? "true" : "false"
939
- },
940
- {
941
- key: "--callToActionSent",
942
- data: callToActionSent ? "true" : "false"
943
- },
944
- {
945
- key: "--CTAClickedButNoEmail",
946
- data: CTAClickedButNoEmail ? "true" : "false"
947
- },
948
- { key: "--emailSent", data: emailSent ? "true" : "false" },
949
- {
950
- key: "--emailClickedButNoEmail",
951
- data: emailClickedButNoEmail ? "true" : "false"
952
- },
953
- { key: "--messages", data: messagesAndHistory.length.toString() },
954
- { key: "--currentTimeUTC", data: browserInfo == null ? void 0 : browserInfo.currentTimeUTC },
955
- { key: "--userTimezone", data: browserInfo == null ? void 0 : browserInfo.userTimezone },
956
- { key: "--userLanguage", data: browserInfo == null ? void 0 : browserInfo.userLanguage }
900
+ key: "--messages",
901
+ data: messagesAndHistory.length.toString()
902
+ }
957
903
  ],
958
904
  true,
959
905
  true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.10.3",
3
+ "version": "0.10.4",
4
4
  "description": "Prebuilt UI components for LLMAsAService.io",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/src/ChatPanel.tsx CHANGED
@@ -1,5 +1,11 @@
1
1
  import { LLMAsAServiceCustomer, useLLM } from "llmasaservice-client";
2
- import React, { useCallback, useEffect, useRef, useState } from "react";
2
+ import React, {
3
+ useCallback,
4
+ useEffect,
5
+ useMemo,
6
+ useRef,
7
+ useState,
8
+ } from "react";
3
9
  import ReactMarkdown from "react-markdown";
4
10
  import rehypeRaw from "rehype-raw";
5
11
  import ReactDOMServer from "react-dom/server";
@@ -178,6 +184,66 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
178
184
  >([]);
179
185
 
180
186
  const responseAreaRef = useRef(null);
187
+ const browserInfo = useMemo(() => getBrowserInfo(), []);
188
+
189
+ const dataWithExtras = useMemo(() => {
190
+ return [
191
+ ...data,
192
+ { key: "--customer_id", data: currentCustomer?.customer_id ?? "" },
193
+ {
194
+ key: "--customer_name",
195
+ data: currentCustomer?.customer_name ?? "",
196
+ },
197
+ {
198
+ key: "--customer_user_id",
199
+ data: currentCustomer?.customer_user_id ?? "",
200
+ },
201
+ {
202
+ key: "--customer_user_email",
203
+ data: currentCustomer?.customer_user_email ?? "",
204
+ },
205
+ { key: "--email", data: emailInput ?? "" },
206
+ { key: "--emailValid", data: emailValid ? "true" : "false" },
207
+ {
208
+ key: "--emailInputSet",
209
+ data: emailInputSet ? "true" : "false",
210
+ },
211
+ {
212
+ key: "--emailPanelShowing",
213
+ data: showEmailPanel ? "true" : "false",
214
+ },
215
+ {
216
+ key: "--callToActionSent",
217
+ data: callToActionSent ? "true" : "false",
218
+ },
219
+ {
220
+ key: "--CTAClickedButNoEmail",
221
+ data: CTAClickedButNoEmail ? "true" : "false",
222
+ },
223
+ { key: "--emailSent", data: emailSent ? "true" : "false" },
224
+ {
225
+ key: "--emailClickedButNoEmail",
226
+ data: emailClickedButNoEmail ? "true" : "false",
227
+ },
228
+ {
229
+ key: "--currentTimeUTC",
230
+ data: browserInfo?.currentTimeUTC,
231
+ },
232
+ { key: "--userTimezone", data: browserInfo?.userTimezone },
233
+ { key: "--userLanguage", data: browserInfo?.userLanguage },
234
+ ];
235
+ }, [
236
+ data,
237
+ currentCustomer,
238
+ emailInput,
239
+ emailValid,
240
+ emailInputSet,
241
+ showEmailPanel,
242
+ callToActionSent,
243
+ CTAClickedButNoEmail,
244
+ emailSent,
245
+ emailClickedButNoEmail,
246
+ ]);
181
247
 
182
248
  // public api url for dev and production
183
249
  let publicAPIUrl = "https://api.llmasaservice.io";
@@ -392,56 +458,11 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
392
458
  "",
393
459
  messagesAndHistory,
394
460
  [
395
- ...data,
396
- {
397
- key: "--customer_id",
398
- data: currentCustomer?.customer_id ?? "",
399
- },
400
- {
401
- key: "--customer_name",
402
- data: currentCustomer?.customer_name ?? "",
403
- },
404
- {
405
- key: "--customer_user_id",
406
- data: currentCustomer?.customer_user_id ?? "",
407
- },
408
- {
409
- key: "--customer_user_email",
410
- data: currentCustomer?.customer_user_email ?? "",
411
- },
412
- { key: "--email", data: emailInput ?? "" },
413
- { key: "--emailValid", data: emailValid ? "true" : "false" },
414
- {
415
- key: "--emailInputSet",
416
- data: emailInputSet ? "true" : "false",
417
- },
418
- {
419
- key: "--emailPanelShowing",
420
- data: showEmailPanel ? "true" : "false",
421
- },
422
- {
423
- key: "--callToActionSent",
424
- data: callToActionSent ? "true" : "false",
425
- },
426
- {
427
- key: "--CTAClickedButNoEmail",
428
- data: CTAClickedButNoEmail ? "true" : "false",
429
- },
430
- { key: "--emailSent", data: emailSent ? "true" : "false" },
431
- {
432
- key: "--emailClickedButNoEmail",
433
- data: emailClickedButNoEmail ? "true" : "false",
434
- },
461
+ ...dataWithExtras,
435
462
  {
436
463
  key: "--messages",
437
464
  data: messagesAndHistory.length.toString(),
438
465
  },
439
- {
440
- key: "--currentTimeUTC",
441
- data: browserInfo?.currentTimeUTC,
442
- },
443
- { key: "--userTimezone", data: browserInfo?.userTimezone },
444
- { key: "--userLanguage", data: browserInfo?.userLanguage },
445
466
  ],
446
467
  true,
447
468
  true,
@@ -469,6 +490,31 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
469
490
  ]
470
491
  ); // This ensures the callback gets recreated when things change
471
492
 
493
+ const anthropic_toolAction = {
494
+ pattern:
495
+ '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[^}]+\\}),"service":"([^"]+)"\\}',
496
+ type: "button",
497
+ markdown: "Approve Tool Use: $2",
498
+ callback: toolUseCallback,
499
+ };
500
+
501
+ const openAI_toolAction = {
502
+ pattern:
503
+ '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
504
+ type: "button",
505
+ markdown: "Approve Tool Use: $2",
506
+ callback: toolUseCallback,
507
+ };
508
+
509
+ // google doesn't return an id, so we just grab functioCall
510
+ const google_toolAction = {
511
+ pattern:
512
+ '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[^}]+\\})\\s*\\}\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
513
+ type: "button",
514
+ markdown: "Approve Tool Use: $2",
515
+ callback: toolUseCallback,
516
+ };
517
+
472
518
  // add our MCP tool use action to the list of actions
473
519
  useEffect(() => {
474
520
  /* regexs need to be double escaped in js
@@ -479,31 +525,6 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
479
525
  group 4: service
480
526
  */
481
527
 
482
- const anthropic_toolAction = {
483
- pattern:
484
- '\\{"type":"tool_use","id":"([^"]+)","name":"([^"]+)","input":(\\{[^}]+\\}),"service":"([^"]+)"\\}',
485
- type: "button",
486
- markdown: "Approve Tool Use: $2",
487
- callback: toolUseCallback,
488
- };
489
-
490
- const openAI_toolAction = {
491
- pattern:
492
- '\\{"id":"([^"]+)","type":"function","function":\\{"name":"([^"]+)","arguments":"((?:\\\\.|[^"\\\\])*)"\\},"service":"([^"]+)"\\}',
493
- type: "button",
494
- markdown: "Approve Tool Use: $2",
495
- callback: toolUseCallback,
496
- };
497
-
498
- // google doesn't return an id, so we just grab functioCall
499
- const google_toolAction = {
500
- pattern:
501
- '^\\{\\s*"(functionCall)"\\s*:\\s*\\{\\s*"name"\\s*:\\s*"([^"]+)"\\s*,\\s*"args"\\s*:\\s*(\\{[^}]+\\})\\s*\\}\\s*,\\s*"service"\\s*:\\s*"([^"]+)"\\s*\\}$',
502
- type: "button",
503
- markdown: "Approve Tool Use: $2",
504
- callback: toolUseCallback,
505
- };
506
-
507
528
  setAllActions([
508
529
  ...actions,
509
530
  anthropic_toolAction,
@@ -577,7 +598,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
577
598
  };
578
599
  });
579
600
  }
580
- }, [response]);
601
+ }, [response, allActions, lastKey, lastCallId, messages.length]);
581
602
 
582
603
  function hasVerticalScrollbar(element: any) {
583
604
  return element.scrollHeight > element.clientHeight;
@@ -616,56 +637,15 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
616
637
  if (lastController) stop(lastController);
617
638
  const controller = new AbortController();
618
639
 
619
- const browserInfo = getBrowserInfo();
620
-
621
640
  send(
622
641
  initialPrompt,
623
642
  messages,
624
643
  [
625
- ...data,
626
- {
627
- key: "--customer_id",
628
- data: currentCustomer?.customer_id ?? "",
629
- },
630
- {
631
- key: "--customer_name",
632
- data: currentCustomer?.customer_name ?? "",
633
- },
634
- {
635
- key: "--customer_user_id",
636
- data: currentCustomer?.customer_user_id ?? "",
637
- },
638
- {
639
- key: "--customer_user_email",
640
- data: currentCustomer?.customer_user_email ?? "",
641
- },
642
- { key: "--email", data: emailInput ?? "" },
643
- { key: "--emailValid", data: emailValid ? "true" : "false" },
644
- {
645
- key: "--emailInputSet",
646
- data: emailInputSet ? "true" : "false",
647
- },
648
- {
649
- key: "--emailPanelShowing",
650
- data: showEmailPanel ? "true" : "false",
651
- },
644
+ ...dataWithExtras,
652
645
  {
653
- key: "--callToActionSent",
654
- data: callToActionSent ? "true" : "false",
646
+ key: "--messages",
647
+ data: messages.length.toString(),
655
648
  },
656
- {
657
- key: "--CTAClickedButNoEmail",
658
- data: CTAClickedButNoEmail ? "true" : "false",
659
- },
660
- { key: "--emailSent", data: emailSent ? "true" : "false" },
661
- {
662
- key: "--emailClickedButNoEmail",
663
- data: emailClickedButNoEmail ? "true" : "false",
664
- },
665
- { key: "--messages", data: messages.length.toString() },
666
- { key: "--currentTimeUTC", data: browserInfo?.currentTimeUTC },
667
- { key: "--userTimezone", data: browserInfo?.userTimezone },
668
- { key: "--userLanguage", data: browserInfo?.userLanguage },
669
649
  ],
670
650
  true,
671
651
  true,
@@ -972,52 +952,16 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
972
952
  }
973
953
 
974
954
  console.log("Sending for conversation", convId);
975
-
976
- const browserInfo = getBrowserInfo();
977
-
978
955
  const controller = new AbortController();
979
956
  send(
980
957
  nextPromptToSend,
981
958
  messagesAndHistory,
982
959
  [
983
- ...data,
984
- { key: "--customer_id", data: currentCustomer?.customer_id ?? "" },
985
- {
986
- key: "--customer_name",
987
- data: currentCustomer?.customer_name ?? "",
988
- },
989
- {
990
- key: "--customer_user_id",
991
- data: currentCustomer?.customer_user_id ?? "",
992
- },
993
- {
994
- key: "--customer_user_email",
995
- data: currentCustomer?.customer_user_email ?? "",
996
- },
997
- { key: "--email", data: emailInput ?? "" },
998
- { key: "--emailValid", data: emailValid ? "true" : "false" },
999
- { key: "--emailInputSet", data: emailInputSet ? "true" : "false" },
1000
- {
1001
- key: "--emailPanelShowing",
1002
- data: showEmailPanel ? "true" : "false",
1003
- },
1004
- {
1005
- key: "--callToActionSent",
1006
- data: callToActionSent ? "true" : "false",
1007
- },
1008
- {
1009
- key: "--CTAClickedButNoEmail",
1010
- data: CTAClickedButNoEmail ? "true" : "false",
1011
- },
1012
- { key: "--emailSent", data: emailSent ? "true" : "false" },
960
+ ...dataWithExtras,
1013
961
  {
1014
- key: "--emailClickedButNoEmail",
1015
- data: emailClickedButNoEmail ? "true" : "false",
962
+ key: "--messages",
963
+ data: messagesAndHistory.length.toString(),
1016
964
  },
1017
- { key: "--messages", data: messagesAndHistory.length.toString() },
1018
- { key: "--currentTimeUTC", data: browserInfo?.currentTimeUTC },
1019
- { key: "--userTimezone", data: browserInfo?.userTimezone },
1020
- { key: "--userLanguage", data: browserInfo?.userLanguage },
1021
965
  ],
1022
966
  true,
1023
967
  true,