reset some styles

lexio/lib/components/AdvancedQueryField/AdvancedQueryField.tsx

@@ -24,6 +24,7 @@ import {
 } from '../RAGProvider/hooks';
 import { RetrievalResult, SourceReference, WorkflowMode } from '../../types';
 import { ThemeContext, removeUndefined } from '../../theme/ThemeContext';
+import { ResetWrapper } from '../../utils/ResetWrapper';
 
 /**
  * Styles interface for the AdvancedQueryField component
@@ -190,7 +191,7 @@ interface AdvancedQueryFieldProps {
  * />
  * ```
  */
-export const AdvancedQueryField: React.FC<AdvancedQueryFieldProps> = ({
+const AdvancedQueryField: React.FC<AdvancedQueryFieldProps> = ({
   onSubmit,
   onSourceAdded,
   onSourceDeleted,
@@ -746,6 +747,7 @@ export const AdvancedQueryField: React.FC<AdvancedQueryFieldProps> = ({
 
   // ----- Render -----
   return (
+    <ResetWrapper>
     <form
       ref={formRef}
       onSubmit={handleSubmit}
@@ -918,5 +920,8 @@ export const AdvancedQueryField: React.FC<AdvancedQueryFieldProps> = ({
         </button>
       </div>
     </form>
+    </ResetWrapper>
   );
 };
+
+export { AdvancedQueryField }

lexio/lib/components/ChatWindow/ChatWindow.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { ThemeContext } from '../../theme/ThemeContext';
 import { useRAGMessages } from '../RAGProvider/hooks';
+import { ResetWrapper } from '../../utils/ResetWrapper';
 
 // Define a type for the shape of the overrides
 export interface ChatWindowStyles extends React.CSSProperties {
@@ -89,6 +90,7 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
   };
 
   return (
+    <ResetWrapper>
     <div
       className="w-full h-full overflow-y-auto"
       style={style}
@@ -107,9 +109,10 @@ const ChatWindow: React.FC<ChatWindowProps> = ({
           <div className="inline" style={{ whiteSpace: 'pre-wrap' }}>{currentStream.content}</div>
         </div>
       )}
-      <div ref={chatEndRef} />
-    </div>
+        <div ref={chatEndRef} />
+      </div>
+    </ResetWrapper>
   );
 };
 
-export { ChatWindow };
+export { ChatWindow }

lexio/lib/components/QueryField/QueryField.tsx

@@ -3,6 +3,7 @@ import useResizeObserver from '@react-hook/resize-observer';
 import type { WorkflowMode } from '../../types';
 import { useRAGMessages, useRAGStatus } from '../RAGProvider/hooks';
 import { ThemeContext, removeUndefined } from '../../theme/ThemeContext';
+import { ResetWrapper } from '../../utils/ResetWrapper';
 
 /**
  * Styles interface for the QueryField component
@@ -177,6 +178,7 @@ const QueryField: React.FC<QueryFieldProps> = ({
     textareaRef.current.scrollHeight > formRef.current.clientHeight - 50;
 
   return (
+    <ResetWrapper>
     <form
       ref={formRef}
       onSubmit={handleSubmit}
@@ -250,7 +252,8 @@ const QueryField: React.FC<QueryFieldProps> = ({
         </button>
       </div>
     </form>
+    </ResetWrapper>
   );
 };
 
-export { QueryField };
+export { QueryField }

lexio/lib/components/SourcesDisplay/SourcesDisplay.tsx

@@ -2,7 +2,7 @@ import { useState, useContext } from "react";
 import { RetrievalResult, SourceReference } from "../../types";
 import { useRAGSources } from "../RAGProvider/hooks";
 import { ThemeContext, removeUndefined } from "../../theme/ThemeContext";
-
+import { ResetWrapper } from "../../utils/ResetWrapper";
 export interface SourcesDisplayStyles extends React.CSSProperties {
   backgroundColor?: string;
   color?: string;
@@ -154,6 +154,7 @@ const SourcesDisplay: React.FC<SourcesDisplayProps> = ({
   };
 
   return (
+    <ResetWrapper>
     <div className="w-full h-full overflow-y-auto" style={{
       backgroundColor: style.backgroundColor,
       color: style.color,
@@ -282,7 +283,8 @@ const SourcesDisplay: React.FC<SourcesDisplayProps> = ({
         </ul>
       )}
     </div>
+    </ResetWrapper>
   );
 };
 
-export { SourcesDisplay };
+export { SourcesDisplay }

lexio/lib/utils/ResetWrapper.tsx

@@ -0,0 +1,67 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from '../theme/ThemeContext';
+
+export interface ResetWrapperProps {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+export const ResetWrapper: React.FC<ResetWrapperProps> = ({ 
+  children, 
+  style,
+  className 
+}) => {
+  const themeContext = useContext(ThemeContext);
+  if (!themeContext) {
+    throw new Error('ThemeContext is undefined');
+  }
+  const { typography } = themeContext.theme;
+
+  return (
+    <div 
+      className={className}
+      style={{
+        // Base reset styles
+        all: 'initial',
+        display: 'block',
+        boxSizing: 'border-box',
+        width: '100%',
+        height: '100%',
+        // Theme defaults
+        fontFamily: typography.fontFamily,
+        fontSize: typography.fontSizeBase,
+        lineHeight: typography.lineHeight,
+        // Text resets
+        textDecoration: 'none',
+        textDecorationLine: 'none',
+        textDecorationColor: 'inherit',
+        textDecorationThickness: '0',
+        textUnderlineOffset: '0',
+        textTransform: 'none',
+        letterSpacing: 'normal',
+        wordSpacing: 'normal',
+        textAlign: 'left',
+        textShadow: 'none',
+        // Webkit specific resets
+        WebkitTextDecorationLine: 'none',
+        WebkitTextFillColor: 'currentColor',
+        WebkitTextStrokeWidth: '0',
+        WebkitTapHighlightColor: 'transparent',
+        WebkitFontSmoothing: 'antialiased',
+        // Additional resets
+        border: 'none',
+        borderStyle: 'none',
+        borderWidth: '0',
+        borderColor: 'transparent',
+        // Make background transparent
+        background: 'transparent',
+        backgroundColor: 'transparent',
+        // Allow style overrides
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+};