llmasaservice-ui 0.6.0 → 0.6.1

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 +27 -30
  2. package/dist/index.mjs +27 -30
  3. package/package.json +1 -1
  4. package/src/ChatPanel.tsx +41 -36
package/dist/index.js CHANGED
@@ -507,36 +507,33 @@ var ChatPanel = ({
507
507
  };
508
508
  const convertHistoryToHTML = (history2) => {
509
509
  const stylesheet = `
510
- <style>
511
- .conversation-history {
512
- font-family: Arial, sans-serif;
513
- line-height: 1;
514
- }
515
- .history-entry {
516
- margin-bottom: 15px;
517
- display: flex;
518
- flex-direction: column;
519
- }
520
- .prompt-container, .response-container {
521
- display: flex;
522
- flex-direction: column;
523
- margin-bottom: 3px;
524
- }
525
- .prompt {
526
- background-color: #efefef;
527
- padding: 5px;
528
- border-radius: 5px;
529
- max-width: 80%;
530
- margin-left: 0;
531
- }
532
- .response {
533
- background-color: #f0fcfd;
534
- padding: 5px;
535
- border-radius: 5px;
536
- max-width: 80%;
537
- margin-left: 25px;
538
- }
539
- </style>
510
+ <style>
511
+ .conversation-history {
512
+ font-family: Arial, sans-serif;
513
+ line-height: 1.5; /* Slightly increase line height for readability */
514
+ }
515
+ .history-entry {
516
+ margin-bottom: 15px;
517
+ }
518
+ .prompt-container, .response-container {
519
+ margin-bottom: 10px; /* Adjusted spacing */
520
+ }
521
+ .prompt, .response {
522
+ display: block; /* Ensure they take up the full row */
523
+ margin: 5px 0; /* Add vertical spacing */
524
+ padding: 10px; /* Increase padding for better spacing */
525
+ border-radius: 5px;
526
+ max-width: 80%; /* Keep width constrained */
527
+ }
528
+ .prompt {
529
+ background-color: #efefef;
530
+ margin-left: 0; /* Align to the left */
531
+ }
532
+ .response {
533
+ background-color: #f0fcfd;
534
+ margin-left: 25px; /* Indent slightly for visual differentiation */
535
+ }
536
+ </style>
540
537
  `;
541
538
  let html = `
542
539
  <html>
package/dist/index.mjs CHANGED
@@ -474,36 +474,33 @@ var ChatPanel = ({
474
474
  };
475
475
  const convertHistoryToHTML = (history2) => {
476
476
  const stylesheet = `
477
- <style>
478
- .conversation-history {
479
- font-family: Arial, sans-serif;
480
- line-height: 1;
481
- }
482
- .history-entry {
483
- margin-bottom: 15px;
484
- display: flex;
485
- flex-direction: column;
486
- }
487
- .prompt-container, .response-container {
488
- display: flex;
489
- flex-direction: column;
490
- margin-bottom: 3px;
491
- }
492
- .prompt {
493
- background-color: #efefef;
494
- padding: 5px;
495
- border-radius: 5px;
496
- max-width: 80%;
497
- margin-left: 0;
498
- }
499
- .response {
500
- background-color: #f0fcfd;
501
- padding: 5px;
502
- border-radius: 5px;
503
- max-width: 80%;
504
- margin-left: 25px;
505
- }
506
- </style>
477
+ <style>
478
+ .conversation-history {
479
+ font-family: Arial, sans-serif;
480
+ line-height: 1.5; /* Slightly increase line height for readability */
481
+ }
482
+ .history-entry {
483
+ margin-bottom: 15px;
484
+ }
485
+ .prompt-container, .response-container {
486
+ margin-bottom: 10px; /* Adjusted spacing */
487
+ }
488
+ .prompt, .response {
489
+ display: block; /* Ensure they take up the full row */
490
+ margin: 5px 0; /* Add vertical spacing */
491
+ padding: 10px; /* Increase padding for better spacing */
492
+ border-radius: 5px;
493
+ max-width: 80%; /* Keep width constrained */
494
+ }
495
+ .prompt {
496
+ background-color: #efefef;
497
+ margin-left: 0; /* Align to the left */
498
+ }
499
+ .response {
500
+ background-color: #f0fcfd;
501
+ margin-left: 25px; /* Indent slightly for visual differentiation */
502
+ }
503
+ </style>
507
504
  `;
508
505
  let html = `
509
506
  <html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "llmasaservice-ui",
3
- "version": "0.6.0",
3
+ "version": "0.6.1",
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
@@ -119,7 +119,8 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
119
119
  const [isAtBottom, setIsAtBottom] = useState(true);
120
120
  const [isEmailModalOpen, setIsEmailModalOpen] = useState(false);
121
121
  const [isCallToActionModalOpen, setIsCallToActionModalOpen] = useState(false);
122
- const [hasSentCallToActionEmail, setHasSentCallToActionEmail] = useState(false);
122
+ const [hasSentCallToActionEmail, setHasSentCallToActionEmail] =
123
+ useState(false);
123
124
 
124
125
  const handleSendEmail = (to: string, from: string) => {
125
126
  sendConversationsViaEmail(to, `Conversation History from ${title}`, from);
@@ -129,17 +130,23 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
129
130
 
130
131
  useEffect(() => {
131
132
  const handleBeforeUnload = (event: BeforeUnloadEvent) => {
132
- if (callToActionMustSendEmail && showCallToAction && callToActionEmailAddress && callToActionEmailAddress !== "" && !hasSentCallToActionEmail) {
133
+ if (
134
+ callToActionMustSendEmail &&
135
+ showCallToAction &&
136
+ callToActionEmailAddress &&
137
+ callToActionEmailAddress !== "" &&
138
+ !hasSentCallToActionEmail
139
+ ) {
133
140
  event.preventDefault();
134
- event.returnValue = ''; // Chrome requires returnValue to be set
141
+ event.returnValue = ""; // Chrome requires returnValue to be set
135
142
  setIsCallToActionModalOpen(true);
136
143
  }
137
144
  };
138
145
 
139
- window.addEventListener('beforeunload', handleBeforeUnload);
146
+ window.addEventListener("beforeunload", handleBeforeUnload);
140
147
 
141
148
  return () => {
142
- window.removeEventListener('beforeunload', handleBeforeUnload);
149
+ window.removeEventListener("beforeunload", handleBeforeUnload);
143
150
  };
144
151
  }, []);
145
152
 
@@ -489,36 +496,33 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
489
496
  [prompt: string]: { callId: string; content: string };
490
497
  }): string => {
491
498
  const stylesheet = `
492
- <style>
493
- .conversation-history {
494
- font-family: Arial, sans-serif;
495
- line-height: 1;
496
- }
497
- .history-entry {
498
- margin-bottom: 15px;
499
- display: flex;
500
- flex-direction: column;
501
- }
502
- .prompt-container, .response-container {
503
- display: flex;
504
- flex-direction: column;
505
- margin-bottom: 3px;
506
- }
507
- .prompt {
508
- background-color: #efefef;
509
- padding: 5px;
510
- border-radius: 5px;
511
- max-width: 80%;
512
- margin-left: 0;
513
- }
514
- .response {
515
- background-color: #f0fcfd;
516
- padding: 5px;
517
- border-radius: 5px;
518
- max-width: 80%;
519
- margin-left: 25px;
520
- }
521
- </style>
499
+ <style>
500
+ .conversation-history {
501
+ font-family: Arial, sans-serif;
502
+ line-height: 1.5; /* Slightly increase line height for readability */
503
+ }
504
+ .history-entry {
505
+ margin-bottom: 15px;
506
+ }
507
+ .prompt-container, .response-container {
508
+ margin-bottom: 10px; /* Adjusted spacing */
509
+ }
510
+ .prompt, .response {
511
+ display: block; /* Ensure they take up the full row */
512
+ margin: 5px 0; /* Add vertical spacing */
513
+ padding: 10px; /* Increase padding for better spacing */
514
+ border-radius: 5px;
515
+ max-width: 80%; /* Keep width constrained */
516
+ }
517
+ .prompt {
518
+ background-color: #efefef;
519
+ margin-left: 0; /* Align to the left */
520
+ }
521
+ .response {
522
+ background-color: #f0fcfd;
523
+ margin-left: 25px; /* Indent slightly for visual differentiation */
524
+ }
525
+ </style>
522
526
  `;
523
527
 
524
528
  let html = `
@@ -791,6 +795,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
791
795
  )}
792
796
 
793
797
  <div ref={bottomRef} />
798
+
794
799
  {hasScroll && !isAtBottom && (
795
800
  <button className="scroll-button" onClick={scrollToBottom}>
796
801
  ↓
@@ -820,7 +825,7 @@ const ChatPanel: React.FC<ChatPanelProps & ExtraProps> = ({
820
825
  </button>
821
826
  )}
822
827
 
823
- {(showCallToAction && callToActionEmailAddress) && (
828
+ {showCallToAction && callToActionEmailAddress && (
824
829
  <button
825
830
  className="save-button"
826
831
  onClick={() => setIsCallToActionModalOpen(true)}