@alia.onl/sdk 2.0.0 → 3.1.0

package/src/components/AliaChatScreen.tsx

@@ -0,0 +1,140 @@
+/**
+ * Full-screen Alia chat component for use as a route/screen in Oxy ecosystem apps.
+ *
+ * Usage:
+ * ```tsx
+ * import { AliaChatScreen } from '@alia.onl/sdk';
+ *
+ * <AliaChatScreen
+ *   clientContext="Notes app — user is viewing note #42"
+ *   suggestions={[{ label: 'Summarize', prompt: 'Summarize this note' }]}
+ *   headerLeft={<BackButton />}
+ * />
+ * ```
+ */
+
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { AliaChatContent, type AliaChatContentRef } from './AliaChatContent';
+import { AliaFace, type AliaExpression } from './AliaFace';
+import { useAliaColors } from '../theme';
+import type { WelcomeSuggestion } from './AliaWelcomeMessage';
+
+export interface AliaChatScreenProps {
+  /** App context injected into system prompt */
+  clientContext?: string;
+  /** Alia model (default: 'alia-v1') */
+  model?: string;
+  /** API URL override */
+  apiUrl?: string;
+  /** Optional header left action (e.g., back button) */
+  headerLeft?: React.ReactNode;
+  /** Optional header right action (e.g., settings button) */
+  headerRight?: React.ReactNode;
+  /** Welcome screen greeting */
+  welcomeGreeting?: string;
+  /** Welcome screen subtitle */
+  welcomeSubtitle?: string;
+  /** Welcome screen suggestions */
+  welcomeSuggestions?: WelcomeSuggestion[];
+}
+
+export function AliaChatScreen({
+  clientContext,
+  model,
+  apiUrl,
+  headerLeft,
+  headerRight,
+  welcomeGreeting,
+  welcomeSubtitle,
+  welcomeSuggestions,
+}: AliaChatScreenProps) {
+  const colors = useAliaColors();
+  const insets = useSafeAreaInsets();
+  const contentRef = useRef<AliaChatContentRef>(null);
+
+  const [faceExpression, setFaceExpression] = useState<AliaExpression>('Idle A');
+  const [hasMessages, setHasMessages] = useState(false);
+
+  // Poll content ref for header state
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (contentRef.current) {
+        setFaceExpression(contentRef.current.faceExpression);
+        setHasMessages(contentRef.current.messages.length > 0);
+      }
+    }, 200);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    contentRef.current?.clear();
+  }, []);
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background, paddingTop: insets.top }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          {headerLeft}
+          <AliaFace size={28} expression={faceExpression} />
+          <Text style={[styles.headerTitle, { color: colors.text }]}>Alia</Text>
+        </View>
+        <View style={styles.headerRight}>
+          {hasMessages && (
+            <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
+              <Text style={[styles.clearText, { color: colors.secondaryText }]}>Clear</Text>
+            </TouchableOpacity>
+          )}
+          {headerRight}
+        </View>
+      </View>
+
+      {/* Chat content */}
+      <AliaChatContent
+        ref={contentRef}
+        clientContext={clientContext}
+        model={model}
+        apiUrl={apiUrl}
+        welcomeGreeting={welcomeGreeting}
+        welcomeSubtitle={welcomeSubtitle}
+        welcomeSuggestions={welcomeSuggestions}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  headerRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  clearButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  clearText: {
+    fontSize: 14,
+  },
+});

package/src/components/AliaChatSheet.tsx

@@ -27,13 +27,10 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAliaChat, type UseAliaChatOptions } from '../hooks/useAliaChat';
-import { AliaChatMessageList } from './AliaChatMessageList';
-import { AliaChatInput } from './AliaChatInput';
-import { AliaChatSuggestions } from './AliaChatSuggestions';
+import { AliaChatContent, type AliaChatContentRef } from './AliaChatContent';
 import { AliaFace, type AliaExpression } from './AliaFace';
 import { useAliaColors } from '../theme';
-import type { AliaChatSuggestion } from '../types';
+import type { WelcomeSuggestion } from './AliaWelcomeMessage';
 
 const { height: SCREEN_HEIGHT } = Dimensions.get('window');
 
@@ -46,12 +43,16 @@ const SPRING_CONFIG = {
 export interface AliaChatSheetProps {
   /** App context injected into system prompt */
   clientContext?: string;
-  /** Quick action suggestions shown when chat is empty */
-  suggestions?: AliaChatSuggestion[];
   /** Alia model (default: 'alia-v1') */
   model?: string;
   /** API URL override */
   apiUrl?: string;
+  /** Welcome screen greeting */
+  welcomeGreeting?: string;
+  /** Welcome screen subtitle */
+  welcomeSubtitle?: string;
+  /** Welcome screen suggestions */
+  welcomeSuggestions?: WelcomeSuggestion[];
 }
 
 export interface AliaChatSheetRef {
@@ -60,20 +61,33 @@ export interface AliaChatSheetRef {
 }
 
 export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
-  ({ clientContext, suggestions = [], model, apiUrl }, ref) => {
+  ({ clientContext, model, apiUrl, welcomeGreeting, welcomeSubtitle, welcomeSuggestions }, ref) => {
     const colors = useAliaColors();
     const isDark = colors.isDark;
     const insets = useSafeAreaInsets();
 
-    // Chat
-    const chatOptions: UseAliaChatOptions = { apiUrl, model, clientContext };
-    const { messages, send, isStreaming, clear } = useAliaChat(chatOptions);
+    // Content ref for reading state
+    const contentRef = useRef<AliaChatContentRef>(null);
+    const [faceExpression, setFaceExpression] = useState<AliaExpression>('Idle A');
+    const [hasMessages, setHasMessages] = useState(false);
 
     // Sheet visibility
     const [rendered, setRendered] = useState(false);
     const hasClosedRef = useRef(false);
     const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+    // Poll content ref for header state (lightweight, only when rendered)
+    useEffect(() => {
+      if (!rendered) return;
+      const interval = setInterval(() => {
+        if (contentRef.current) {
+          setFaceExpression(contentRef.current.faceExpression);
+          setHasMessages(contentRef.current.messages.length > 0);
+        }
+      }, 200);
+      return () => clearInterval(interval);
+    }, [rendered]);
+
     // Reanimated shared values
     const translateY = useSharedValue(SCREEN_HEIGHT);
     const backdropOpacity = useSharedValue(0);
@@ -200,16 +214,9 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
       [insets.top],
     );
 
-    // Derive AliaFace expression from chat state
-    const faceExpression = useMemo<AliaExpression>(() => {
-      if (!isStreaming) return 'Idle A';
-      const lastMsg = messages[messages.length - 1];
-      if (lastMsg?.role === 'assistant' && lastMsg.toolInvocations?.some(t => t.state === 'call')) return 'Searching A';
-      if (lastMsg?.thinking) return 'Thinking';
-      return 'Writing E';
-    }, [messages, isStreaming]);
-
-    const showSuggestions = messages.length === 0 && suggestions.length > 0;
+    const handleClear = useCallback(() => {
+      contentRef.current?.clear();
+    }, []);
 
     if (!rendered) return null;
 
@@ -256,8 +263,8 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                   </Text>
                 </View>
                 <View style={styles.headerRight}>
-                  {messages.length > 0 && (
-                    <TouchableOpacity onPress={clear} style={styles.clearButton}>
+                  {hasMessages && (
+                    <TouchableOpacity onPress={handleClear} style={styles.clearButton}>
                       <Text
                         style={[
                           styles.clearText,
@@ -286,26 +293,19 @@ export const AliaChatSheet = forwardRef<AliaChatSheetRef, AliaChatSheetProps>(
                 </View>
               </View>
 
-              {/* Suggestions or Messages */}
+              {/* Chat content */}
               <GestureDetector gesture={nativeGesture}>
-                <View style={styles.chatArea}>
-                  {showSuggestions ? (
-                    <AliaChatSuggestions
-                      suggestions={suggestions}
-                      onSelect={send}
-                    />
-                  ) : (
-                    <AliaChatMessageList
-                      messages={messages}
-                      isStreaming={isStreaming}
-                      scrollOffsetY={scrollOffsetY}
-                    />
-                  )}
-                </View>
+                <AliaChatContent
+                  ref={contentRef}
+                  clientContext={clientContext}
+                  model={model}
+                  apiUrl={apiUrl}
+                  scrollOffsetY={scrollOffsetY}
+                  welcomeGreeting={welcomeGreeting}
+                  welcomeSubtitle={welcomeSubtitle}
+                  welcomeSuggestions={welcomeSuggestions}
+                />
               </GestureDetector>
-
-              {/* Input */}
-              <AliaChatInput onSend={send} isStreaming={isStreaming} />
             </Animated.View>
           </GestureDetector>
         </GestureHandlerRootView>
@@ -384,7 +384,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: 16,
   },
-  chatArea: {
-    flex: 1,
-  },
 });

package/src/components/AliaWelcomeMessage.tsx

@@ -0,0 +1,75 @@
+import { Pressable, StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import { Text } from './ui/text';
+import Animated, { FadeIn } from 'react-native-reanimated';
+import { AliaFace } from './AliaFace';
+import type { WelcomeSuggestion } from '../types';
+
+export type { WelcomeSuggestion };
+
+export interface AliaWelcomeMessageProps {
+  greeting: string;
+  subtitle?: string;
+  suggestions?: WelcomeSuggestion[];
+  onSuggestionPress?: (text: string) => void;
+  faceSize?: number;
+}
+
+export function AliaWelcomeMessage({
+  greeting,
+  subtitle,
+  suggestions = [],
+  onSuggestionPress,
+  faceSize = 64,
+}: AliaWelcomeMessageProps) {
+  return (
+    <View className="flex-1 items-center justify-center px-4">
+      <View className="w-full max-w-2xl">
+        {/* Face + Title */}
+        <View className="items-start mb-8">
+          <View className="mb-4">
+            <AliaFace size={faceSize} expression="Greeting" />
+          </View>
+          <View className="space-y-2">
+            <Text className="text-3xl font-bold tracking-tight text-foreground">
+              {greeting}
+            </Text>
+            {subtitle ? (
+              <Text className="text-xl font-medium text-muted-foreground">
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+
+        {/* Suggestion Grid */}
+        {suggestions.length > 0 && (
+          <Animated.View entering={FadeIn.duration(400)}>
+            <View className="flex-row flex-wrap gap-2">
+              {suggestions.map((item) => (
+                <Pressable
+                  key={item.id}
+                  className="flex-1 min-w-[35%] flex-col items-start rounded-3xl border border-border overflow-hidden active:bg-muted/50"
+                  onPress={() => onSuggestionPress?.(item.description)}
+                >
+                  <BlurView intensity={60} tint="default" style={StyleSheet.absoluteFill} />
+                  <View className="p-4 w-full">
+                    <Text className="text-sm font-medium text-surface-foreground mb-1" numberOfLines={1}>
+                      {item.title}
+                    </Text>
+                    <Text
+                      className="text-xs text-muted-foreground line-clamp-1"
+                      numberOfLines={1}
+                    >
+                      {item.description}
+                    </Text>
+                  </View>
+                </Pressable>
+              ))}
+            </View>
+          </Animated.View>
+        )}
+      </View>
+    </View>
+  );
+}

package/src/components/Markdown.tsx

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Text, Platform, Linking } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { useAliaColors } from '../theme';
 
-function createRules(isDark: boolean, textColor: string, monoFont: string) {
+const BODY_TEXT = { fontSize: 16, lineHeight: 28 } as const;
+const HEADING_TEXT = { fontSize: 16, lineHeight: 22 } as const;
+const SANS_FONT = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' })!;
+const MONO_FONT = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' })!;
+
+function createRules(isDark: boolean, textColor: string) {
   return {
     heading1: (node: any, children: any) => (
       <Text
@@ -16,7 +21,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading2: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 8, marginTop: 12, fontWeight: '600', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 8, marginTop: 12, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
       >
         {children}
       </Text>
@@ -24,7 +29,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading3: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, fontWeight: '600', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '600', color: textColor }}
       >
         {children}
       </Text>
@@ -32,7 +37,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading4: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 6, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 6, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -40,7 +45,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading5: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -48,7 +53,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
     heading6: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ marginBottom: 4, marginTop: 8, fontWeight: '500', lineHeight: 22, color: textColor }}
+        style={{ marginBottom: 4, marginTop: 8, ...HEADING_TEXT, fontWeight: '500', color: textColor }}
       >
         {children}
       </Text>
@@ -67,7 +72,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
             padding: 12,
           }}
         >
-          <Text style={{ fontSize: 13, fontFamily: monoFont }}>{children}</Text>
+          <Text style={{ fontSize: 13, fontFamily: MONO_FONT }}>{children}</Text>
         </View>
       ) : (
         <Text
@@ -77,7 +82,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
             paddingHorizontal: 4,
             paddingVertical: 1,
             fontSize: 13,
-            fontFamily: monoFont,
+            fontFamily: MONO_FONT,
             borderRadius: 3,
           }}
         >
@@ -93,8 +98,8 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
 
       return (
         <View key={node.key} style={{ flexDirection: 'row', paddingVertical: 2, paddingLeft: 16 }}>
-          <Text style={{ marginRight: 8, minWidth: 14, color: '#71717A' }}>{bullet}</Text>
-          <Text style={{ flex: 1, color: textColor }}>{children}</Text>
+          <Text style={{ marginRight: 8, minWidth: 14, ...BODY_TEXT, color: '#71717A' }}>{bullet}</Text>
+          <Text style={{ flex: 1, ...BODY_TEXT, color: textColor }}>{children}</Text>
         </View>
       );
     },
@@ -105,12 +110,12 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
       <View key={node.key} style={{ marginVertical: 8 }}>{children}</View>
     ),
     strong: (node: any, children: any) => (
-      <Text key={node.key} style={{ fontWeight: '600', color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ fontWeight: '600', ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
     link: (node: any, children: any) => (
       <Text
         key={node.key}
-        style={{ color: isDark ? '#60a5fa' : '#2563eb', textDecorationLine: 'underline' }}
+        style={{ color: isDark ? '#60a5fa' : '#2563eb', textDecorationLine: 'underline', ...BODY_TEXT }}
         onPress={() => {
           if (node.attributes?.href) Linking.openURL(node.attributes.href);
         }}
@@ -119,7 +124,7 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
       </Text>
     ),
     paragraph: (node: any, children: any) => (
-      <Text key={node.key} style={{ marginBottom: 8, color: textColor }}>{children}</Text>
+      <Text key={node.key} style={{ marginBottom: 8, ...BODY_TEXT, color: textColor }}>{children}</Text>
     ),
     blockquote: (node: any, children: any) => (
       <View
@@ -157,63 +162,21 @@ function createRules(isDark: boolean, textColor: string, monoFont: string) {
   };
 }
 
-export function AliaMarkdown({ content }: { content: string }) {
-  const colors = useAliaColors();
-  const isDark = colors.isDark;
-
-  const textColor = isDark ? '#ffffff' : '#0a0a0a';
-  const sansFont = Platform.select({ ios: 'Inter', android: 'Inter', default: 'Inter, sans-serif' });
-  const monoFont = Platform.select({ ios: 'Courier', android: 'monospace', default: 'monospace' });
-
-  const customRules = createRules(isDark, textColor, monoFont);
-
-  const markdownStyles = {
-    body: {
-      color: textColor,
-      fontSize: 16,
-      lineHeight: 28,
-      fontFamily: sansFont,
-    },
-    text: {
-      color: textColor,
-      fontSize: 16,
-      lineHeight: 28,
-      fontFamily: sansFont,
-    },
-    paragraph: {
-      marginTop: 0,
-      marginBottom: 8,
-    },
-    strong: {
-      fontWeight: '600' as const,
-    },
-    em: {
-      fontStyle: 'italic' as const,
-    },
-    s: {
-      textDecorationLine: 'line-through' as const,
-    },
-    bullet_list_icon: {
-      marginLeft: 0,
-      marginRight: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    ordered_list_icon: {
-      marginLeft: 0,
-      marginRight: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    bullet_list_content: {
-      flex: 1,
-    },
-    ordered_list_content: {
-      flex: 1,
-    },
+function createStyles(isDark: boolean, textColor: string, borderColor: string, mutedBg: string) {
+  return {
+    body: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
+    text: { ...BODY_TEXT, color: textColor, fontFamily: SANS_FONT },
+    paragraph: { marginTop: 0, marginBottom: 8 },
+    strong: { fontWeight: '600' as const },
+    em: { fontStyle: 'italic' as const },
+    s: { textDecorationLine: 'line-through' as const },
+    bullet_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT },
+    ordered_list_icon: { marginLeft: 0, marginRight: 8, ...BODY_TEXT },
+    bullet_list_content: { flex: 1 },
+    ordered_list_content: { flex: 1 },
     code_inline: {
       fontSize: 13,
-      fontFamily: monoFont,
+      fontFamily: MONO_FONT,
       backgroundColor: isDark ? '#27272a' : '#f4f4f5',
       borderWidth: 0,
       borderRadius: 3,
@@ -222,7 +185,7 @@ export function AliaMarkdown({ content }: { content: string }) {
     },
     code_block: {
       fontSize: 13,
-      fontFamily: monoFont,
+      fontFamily: MONO_FONT,
       backgroundColor: isDark ? '#18181b' : '#f4f4f5',
       borderWidth: 1,
       borderColor: isDark ? '#3f3f46' : '#e4e4e7',
@@ -231,58 +194,39 @@ export function AliaMarkdown({ content }: { content: string }) {
     },
     fence: {
       fontSize: 13,
-      fontFamily: monoFont,
+      fontFamily: MONO_FONT,
       backgroundColor: isDark ? '#18181b' : '#f4f4f5',
       borderWidth: 1,
       borderColor: isDark ? '#3f3f46' : '#e4e4e7',
       borderRadius: 6,
       padding: 12,
     },
-    table: {
-      borderWidth: 1,
-      borderColor: colors.border,
-      borderRadius: 6,
-      marginVertical: 8,
-    },
-    thead: {
-      backgroundColor: colors.muted,
-    },
-    th: {
-      flex: 1,
-      padding: 8,
-      fontWeight: '600' as const,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    td: {
-      flex: 1,
-      padding: 8,
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    tr: {
-      borderBottomWidth: 1,
-      borderColor: colors.border,
-      flexDirection: 'row' as const,
-    },
-    link: {
-      textDecorationLine: 'underline' as const,
-      color: isDark ? '#60a5fa' : '#2563eb',
-      fontSize: 16,
-      lineHeight: 28,
-    },
-    hr: {
-      backgroundColor: isDark ? '#3f3f46' : '#d4d4d8',
-      height: 1,
-      marginVertical: 16,
-    },
+    table: { borderWidth: 1, borderColor, borderRadius: 6, marginVertical: 8 },
+    thead: { backgroundColor: mutedBg },
+    th: { flex: 1, padding: 8, fontWeight: '600' as const, ...BODY_TEXT },
+    td: { flex: 1, padding: 8, ...BODY_TEXT },
+    tr: { borderBottomWidth: 1, borderColor, flexDirection: 'row' as const },
+    link: { textDecorationLine: 'underline' as const, color: isDark ? '#60a5fa' : '#2563eb', ...BODY_TEXT },
+    hr: { backgroundColor: isDark ? '#3f3f46' : '#d4d4d8', height: 1, marginVertical: 16 },
     heading1: { fontSize: 18, fontWeight: '600' as const },
-    heading2: { fontSize: 16, fontWeight: '600' as const },
-    heading3: { fontSize: 16, fontWeight: '600' as const },
-    heading4: { fontSize: 16, fontWeight: '500' as const },
-    heading5: { fontSize: 16, fontWeight: '500' as const },
-    heading6: { fontSize: 16, fontWeight: '500' as const },
+    heading2: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading3: { ...HEADING_TEXT, fontWeight: '600' as const },
+    heading4: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading5: { ...HEADING_TEXT, fontWeight: '500' as const },
+    heading6: { ...HEADING_TEXT, fontWeight: '500' as const },
   };
+}
+
+export function AliaMarkdown({ content }: { content: string }) {
+  const colors = useAliaColors();
+  const isDark = colors.isDark;
+  const textColor = isDark ? '#ffffff' : '#0a0a0a';
+
+  const customRules = useMemo(() => createRules(isDark, textColor), [isDark]);
+  const markdownStyles = useMemo(
+    () => createStyles(isDark, textColor, colors.border, colors.muted),
+    [isDark, colors.border, colors.muted],
+  );
 
   return <Markdown rules={customRules} style={markdownStyles}>{content}</Markdown>;
 }