opendesk-react-native 0.1.6 → 0.1.7

package/src/ui/OpenDeskChat.tsx

@@ -24,6 +24,8 @@ import type { Attachment, Conversation, Message, UploadFile, WidgetConfig } from
 import { BotFace } from './BotFace';
 import { ArrowIcon, ChevronIcon, CloseIcon, PaperclipIcon, PersonIcon, SparkIcon } from './icons';
 import { useKeyboardInset } from './keyboard';
+import { extractSources, hostOf, parseHtml, parseMarkdown, type Block, type Source } from './rich';
+import { RichText } from './RichText';
 import { defaultStrings, format, type ChatStrings } from './strings';
 import { makeTheme, type ChatTheme } from './theme';
 
@@ -680,6 +682,7 @@ function Bubble({
   const avatar = message ? (message.author.user?.avatar_url ?? bot?.avatar_url) : bot?.avatar_url;
   const botLook = bot?.look ?? fallbackBot?.look;
   const text = message ? (message.body_text ?? '') : (reply?.text ?? '');
+  const body = useMemo(() => bodyOf(message, reply, mine, ai), [message, reply, mine, ai]);
   const local = message?.id.startsWith('local-') === true;
   const action = message?.ai_action;
   const tools = reply?.tools ?? [];
@@ -724,7 +727,7 @@ function Bubble({
         </View>
       ) : null}
 
-      {text || reply ? (
+      {text || body.blocks.length > 0 || reply ? (
         <View
           style={[
             styles.msg,
@@ -733,7 +736,40 @@ function Bubble({
             local && styles.sendingMsg,
           ]}
         >
-          {text ? <Text style={[styles.msgText, mine && { color: theme.accentFg }]}>{text}</Text> : <Dots color={theme.ai} />}
+          {mine ? (
+            <Text style={[styles.msgText, { color: theme.accentFg }]}>{text}</Text>
+          ) : body.blocks.length > 0 ? (
+            <RichText
+              blocks={body.blocks}
+              textStyle={styles.msgText}
+              codeBackground={ai ? theme.bg2 : theme.line}
+              quoteColor={theme.line2}
+              mono={theme.mono}
+            />
+          ) : (
+            <Dots color={theme.ai} />
+          )}
+        </View>
+      ) : null}
+
+      {body.sources.length > 0 ? (
+        <View style={styles.sources}>
+          {body.sources.map((source) => (
+            <Pressable
+              key={source.href}
+              accessibilityRole="link"
+              accessibilityHint={hostOf(source.href)}
+              onPress={() => {
+                Linking.openURL(source.href).catch(() => undefined);
+              }}
+              style={({ pressed }) => [styles.src, pressed && { borderColor: theme.aiLine, backgroundColor: theme.aiSoft }]}
+            >
+              <ArrowIcon color={theme.ai} size={11} angle={-45} />
+              <Text style={styles.srcText} numberOfLines={1}>
+                {source.title}
+              </Text>
+            </Pressable>
+          ))}
         </View>
       ) : null}
 
@@ -775,6 +811,23 @@ function Bubble({
   );
 }
 
+/**
+ * What a bubble shows: the visitor's own text as typed; stored replies from their HTML (links
+ * included), falling back to markdown in the text; AI answers still streaming as markdown. An AI
+ * answer's trailing list of links becomes its sources.
+ */
+function bodyOf(message: Message | undefined, reply: AIReply | undefined, mine: boolean, ai: boolean): { blocks: Block[]; sources: Source[] } {
+  if (mine) {
+    return { blocks: [], sources: [] };
+  }
+  if (reply && !message) {
+    return { blocks: parseMarkdown(reply.text, true), sources: [] };
+  }
+  const blocks = message?.body_html?.trim() ? parseHtml(message.body_html, ai) : parseMarkdown(message?.body_text ?? '');
+
+  return ai ? extractSources(blocks) : { blocks, sources: [] };
+}
+
 function ActionCard({
   ui,
   message,
@@ -1245,6 +1298,21 @@ function createStyles(t: ChatTheme) {
     msgMe: { backgroundColor: t.accent },
     msgThem: { backgroundColor: t.bg2 },
     msgAi: { backgroundColor: t.bg3, borderWidth: 1, borderColor: t.line },
+    sources: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 6 },
+    src: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      maxWidth: 240,
+      height: 26,
+      paddingLeft: 8,
+      paddingRight: 10,
+      borderRadius: r.ctl,
+      borderWidth: 1,
+      borderColor: t.line,
+      backgroundColor: t.bg,
+    },
+    srcText: { flexShrink: 1, fontSize: 12, color: t.fg2 },
     msgText: { fontSize: 13.5, lineHeight: 19.5, color: t.fg },
     sendingMsg: { opacity: 0.7 },
     meta: { fontFamily: t.mono, fontSize: 10, color: t.fg4, marginTop: 3, marginHorizontal: 4 },

package/src/ui/RichText.tsx

@@ -0,0 +1,129 @@
+import { Fragment } from 'react';
+import { Linking, StyleSheet, Text, View, type TextStyle } from 'react-native';
+import type { Block, Inline } from './rich';
+
+interface RichTextProps {
+  blocks: Block[];
+  /** The bubble's text style; colour and size carry into every block. */
+  textStyle: TextStyle;
+  /** Fill behind inline code and code blocks. */
+  codeBackground: string;
+  /** Rule beside quotes. */
+  quoteColor: string;
+  mono: string;
+}
+
+/** Renders parsed message blocks like the widget's `.msg`: paragraphs, lists, quotes, code and underlined links. */
+export function RichText({ blocks, textStyle, codeBackground, quoteColor, mono }: RichTextProps) {
+  const color = textStyle.color;
+
+  return (
+    <View style={styles.blocks}>
+      {blocks.map((block, index) => {
+        switch (block.kind) {
+          case 'paragraph':
+            return (
+              <Text key={index} style={textStyle}>
+                <Inlines inlines={block.inlines} codeStyle={{ fontFamily: mono, backgroundColor: codeBackground }} />
+              </Text>
+            );
+          case 'heading':
+            return (
+              <Text key={index} style={[textStyle, styles.bold]}>
+                <Inlines inlines={block.inlines} codeStyle={{ fontFamily: mono, backgroundColor: codeBackground }} />
+              </Text>
+            );
+          case 'quote':
+            return (
+              <View key={index} style={[styles.quote, { borderLeftColor: quoteColor }]}>
+                <Text style={[textStyle, styles.quoteText]}>
+                  <Inlines inlines={block.inlines} codeStyle={{ fontFamily: mono, backgroundColor: codeBackground }} />
+                </Text>
+              </View>
+            );
+          case 'code':
+            return (
+              <View key={index} style={[styles.pre, { backgroundColor: codeBackground }]}>
+                <Text style={[textStyle, styles.preText, { fontFamily: mono }]}>{block.text}</Text>
+              </View>
+            );
+          case 'list':
+            return (
+              <View key={index} style={styles.list}>
+                {block.items.map((item, itemIndex) => (
+                  <View key={itemIndex} style={styles.item}>
+                    <Text style={[textStyle, styles.marker, { color }]}>{block.ordered ? `${itemIndex + 1}.` : '•'}</Text>
+                    <Text style={[textStyle, styles.itemText]}>
+                      <Inlines inlines={item} codeStyle={{ fontFamily: mono, backgroundColor: codeBackground }} />
+                    </Text>
+                  </View>
+                ))}
+              </View>
+            );
+        }
+      })}
+    </View>
+  );
+}
+
+function Inlines({ inlines, codeStyle }: { inlines: Inline[]; codeStyle: TextStyle }) {
+  return (
+    <>
+      {inlines.map((inline, index) => {
+        switch (inline.kind) {
+          case 'text':
+            return <Fragment key={index}>{inline.text}</Fragment>;
+          case 'break':
+            return <Fragment key={index}>{'\n'}</Fragment>;
+          case 'bold':
+            return (
+              <Text key={index} style={styles.bold}>
+                <Inlines inlines={inline.children} codeStyle={codeStyle} />
+              </Text>
+            );
+          case 'italic':
+            return (
+              <Text key={index} style={styles.italic}>
+                <Inlines inlines={inline.children} codeStyle={codeStyle} />
+              </Text>
+            );
+          case 'code':
+            return (
+              <Text key={index} style={[styles.code, codeStyle]}>
+                {inline.text}
+              </Text>
+            );
+          case 'link':
+            return (
+              <Text
+                key={index}
+                accessibilityRole="link"
+                onPress={() => {
+                  Linking.openURL(inline.href).catch(() => undefined);
+                }}
+                style={styles.link}
+              >
+                <Inlines inlines={inline.children} codeStyle={codeStyle} />
+              </Text>
+            );
+        }
+      })}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  blocks: { gap: 6 },
+  bold: { fontWeight: '600' },
+  italic: { fontStyle: 'italic' },
+  link: { textDecorationLine: 'underline', fontWeight: '500' },
+  code: { fontSize: 12 },
+  pre: { borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6 },
+  preText: { fontSize: 12, lineHeight: 17 },
+  quote: { borderLeftWidth: 2, paddingLeft: 8 },
+  quoteText: { opacity: 0.8 },
+  list: { gap: 2 },
+  item: { flexDirection: 'row' },
+  marker: { minWidth: 16, paddingRight: 4 },
+  itemText: { flex: 1 },
+});