@envive-ai/react-widgets-v3 0.3.10 → 0.3.12

package/src/debug/chatEmbed.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { useAtomValue } from 'jotai';
+import classNames from 'classnames';
+import { chatAtom } from '@envive-ai/react-hooks/atoms/chat';
+import { MessageType } from '@envive-ai/react-hooks/application/models';
+import { PromptCarousel, PromptCarouselRows } from '@envive-ai/react-toolkit-v3/PromptCarousel';
+import { MessageContent } from './MessageContent';
+
+const containerClassNames = classNames({
+  'envive-tw-font-sans': true,
+  'envive-tw-text-base': true,
+  'envive-tw-leading-6': true,
+  'envive-tw-font-normal': true,
+});
+
+const messagesContainerClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-flex-col': true,
+  'envive-tw-gap-4': true,
+});
+
+const turnContainerClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-flex-col': true,
+  'envive-tw-gap-2': true,
+});
+
+const messageBodyClassNames = classNames({
+  'envive-tw-whitespace-pre-wrap': true,
+});
+
+const lastTurnClassNames = classNames({
+  'envive-tw-bg-[#FFFFF0]': true,
+  'envive-tw-p-2': true,
+  'envive-tw-rounded-lg': true,
+});
+
+const lastTurnContentClassNames = classNames({
+  'envive-tw-flex': true,
+  'envive-tw-flex-col': true,
+  'envive-tw-gap-2': true,
+});
+
+const ChatEmbed = () => {
+  const { messages, suggestions } = useAtomValue(chatAtom);
+  const lastTurnRef = React.useRef<HTMLDivElement>(null);
+
+  // Scroll the last turn into view when messages change
+  React.useEffect(() => {
+    if (lastTurnRef.current && messages.length > 0) {
+      lastTurnRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }, [messages]);
+
+  const answerSuggestions = suggestions.filter(s => s.isAnswer);
+  const generalSuggestions = suggestions.filter(s => !s.isAnswer);
+
+  return (
+    <div className={containerClassNames}>
+      <div className={messagesContainerClassNames}>
+        {messages.map((turn, turnIdx) => {
+          const isLastTurn = turnIdx === messages.length - 1;
+
+          return (
+            <div key={turnIdx}>
+              <div className={turnContainerClassNames}>
+                {turn
+                  .filter(m => m.type === MessageType.Separator)
+                  .map(message => (
+                    <div key={message.id}>
+                      <div className={messageBodyClassNames}>
+                        <MessageContent message={message} />
+                      </div>
+                    </div>
+                  ))}
+              </div>
+
+              <div
+                ref={isLastTurn ? lastTurnRef : null}
+                className={`${turnContainerClassNames} ${isLastTurn ? lastTurnClassNames : ''}`}
+              >
+                {turn
+                  .filter(m => m.type !== MessageType.Separator)
+                  .map(message => (
+                    <div key={message.id}>
+                      <div className={messageBodyClassNames}>
+                        <MessageContent message={message} />
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {suggestions.length > 0 && (
+        <div className={lastTurnClassNames}>
+          <div className={lastTurnContentClassNames}>
+            <PromptCarousel
+              promptButtonTexts={answerSuggestions.map(s => s.content)}
+              handleButtonClick={() => {}}
+              promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
+              isLoading={false}
+            />
+            <PromptCarousel
+              promptButtonTexts={generalSuggestions.map(s => s.content)}
+              handleButtonClick={() => {}}
+              promptCarouselRows={PromptCarouselRows.ALWAYS_ONE}
+              isLoading={false}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChatEmbed;

package/src/debug/debugBar.tsx

@@ -0,0 +1,12 @@
+import { useSystemSettingsContext } from '@envive-ai/react-hooks/hooks/SystemSettingsContext';
+import { ReportIssue } from './reportIssue';
+
+export const DebugBar = () => {
+  const { showDebugBar } = useSystemSettingsContext();
+  if (!showDebugBar) return null;
+  return (
+    <div className="envive-tw-flex envive-tw-items-center envive-tw-p-[4px]">
+      <ReportIssue />
+    </div>
+  );
+};