clawdex-mobile 1.3.2 → 2.0.0

package/apps/mobile/src/components/ChatInput.tsx

@@ -1,4 +1,6 @@
 import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import { useEffect, useState } from 'react';
 import {
   ActivityIndicator,
   type NativeSyntheticEvent,
@@ -8,10 +10,12 @@ import {
   StyleSheet,
   Text,
   TextInput,
+  type TextLayoutEventData,
   type TextInputKeyPressEventData,
   View,
 } from 'react-native';
 
+import type { VoiceState } from '../hooks/useVoiceRecorder';
 import { colors, radius, spacing } from '../theme';
 
 interface ChatInputProps {
@@ -27,6 +31,10 @@ interface ChatInputProps {
   showStopButton?: boolean;
   isStopping?: boolean;
   placeholder?: string;
+  onVoiceToggle?: () => void;
+  voiceState?: VoiceState;
+  safeAreaBottomInset?: number;
+  keyboardVisible?: boolean;
 }
 
 export function ChatInput({
@@ -42,98 +50,226 @@ export function ChatInput({
   showStopButton = false,
   isStopping = false,
   placeholder = 'Message Codex...',
+  onVoiceToggle,
+  voiceState = 'idle',
+  safeAreaBottomInset = 0,
+  keyboardVisible = false,
 }: ChatInputProps) {
-  const canSend = value.trim().length > 0 && !isLoading;
+  const INPUT_TEXT_LINE_HEIGHT = 20;
+  const INPUT_TEXT_VERTICAL_PADDING = Platform.OS === 'ios' ? 2 : 0;
+  const INPUT_TEXT_MIN_HEIGHT = 20;
+  const INPUT_TEXT_MAX_HEIGHT = 96;
+  const [inputHeight, setInputHeight] = useState(INPUT_TEXT_MIN_HEIGHT);
+  const [inputWidth, setInputWidth] = useState(0);
+  const updateInputHeight = (height: number) => {
+    const nextHeight = Math.max(
+      INPUT_TEXT_MIN_HEIGHT,
+      Math.min(INPUT_TEXT_MAX_HEIGHT, Math.ceil(height))
+    );
+    setInputHeight((previousHeight) =>
+      previousHeight === nextHeight ? previousHeight : nextHeight
+    );
+  };
+
+  useEffect(() => {
+    if (!value && inputHeight !== INPUT_TEXT_MIN_HEIGHT) {
+      setInputHeight(INPUT_TEXT_MIN_HEIGHT);
+    }
+  }, [inputHeight, value]);
+
+  const canSend = value.trim().length > 0 && voiceState === 'idle';
   const canStop = Boolean(showStopButton && onStop);
-  const shouldShowActionButton = canStop || canSend || isLoading;
+  const showVoiceButton = Boolean(onVoiceToggle);
+  const showSendButton = canSend || isLoading;
+  const inputScrollEnabled = inputHeight >= INPUT_TEXT_MAX_HEIGHT;
+  const shouldShowActionButton =
+    canStop || showSendButton || showVoiceButton || voiceState !== 'idle';
+  const baseBottomPadding =
+    Platform.OS === 'ios'
+      ? keyboardVisible
+        ? spacing.sm
+        : spacing.lg
+      : spacing.md;
+  const extraBottomInset = keyboardVisible ? 0 : safeAreaBottomInset;
 
   return (
-    <View style={styles.container}>
-      {attachments.length > 0 ? (
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          contentContainerStyle={styles.attachmentListContent}
-          style={styles.attachmentList}
-        >
-          {attachments.map((attachment, index) => (
-            <Pressable
-              key={`${attachment.id}-${String(index)}`}
-              onPress={
-                onRemoveAttachment
-                  ? () => onRemoveAttachment(attachment.id)
-                  : undefined
-              }
-              style={({ pressed }) => [
-                styles.attachmentChip,
-                pressed && styles.attachmentChipPressed,
-              ]}
-            >
-              <Ionicons name="attach-outline" size={12} color={colors.textMuted} />
-              <Text style={styles.attachmentChipText} numberOfLines={1}>
-                {attachment.label}
-              </Text>
-              {onRemoveAttachment ? (
-                <Ionicons name="close-outline" size={12} color={colors.textMuted} />
-              ) : null}
-            </Pressable>
-          ))}
-        </ScrollView>
-      ) : null}
+    <View style={styles.shell}>
+      <BlurView
+        intensity={26}
+        tint={Platform.OS === 'ios' ? 'systemUltraThinMaterialDark' : 'dark'}
+        blurMethod="dimezisBlurViewSdk31Plus"
+        style={StyleSheet.absoluteFill}
+      />
+      <View
+        style={[
+          styles.container,
+          {
+            paddingBottom:
+              baseBottomPadding + extraBottomInset,
+          },
+        ]}
+      >
+        {attachments.length > 0 ? (
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.attachmentListContent}
+            style={styles.attachmentList}
+          >
+            {attachments.map((attachment, index) => (
+              <Pressable
+                key={`${attachment.id}-${String(index)}`}
+                onPress={
+                  onRemoveAttachment
+                    ? () => onRemoveAttachment(attachment.id)
+                    : undefined
+                }
+                style={({ pressed }) => [
+                  styles.attachmentChip,
+                  pressed && styles.attachmentChipPressed,
+                ]}
+              >
+                <Ionicons name="attach-outline" size={12} color={colors.textMuted} />
+                <Text style={styles.attachmentChipText} numberOfLines={1}>
+                  {attachment.label}
+                </Text>
+                {onRemoveAttachment ? (
+                  <Ionicons name="close-outline" size={12} color={colors.textMuted} />
+                ) : null}
+              </Pressable>
+            ))}
+          </ScrollView>
+        ) : null}
 
-      <View style={styles.row}>
-        <Pressable
-          onPress={onAttachPress}
-          style={({ pressed }) => [styles.plusBtn, pressed && styles.plusBtnPressed]}
-        >
-          <Ionicons name="add" size={20} color={colors.textMuted} />
-        </Pressable>
+        <View style={styles.row}>
+          <Pressable
+            onPress={onAttachPress}
+            style={({ pressed }) => [styles.plusBtn, pressed && styles.plusBtnPressed]}
+          >
+            <Ionicons name="add" size={20} color={colors.textMuted} />
+          </Pressable>
 
-        <View style={styles.inputWrapper}>
-          <TextInput
-            style={styles.input}
-            value={value}
-            onChangeText={onChangeText}
-            onFocus={onFocus}
-            placeholder={placeholder}
-            placeholderTextColor={colors.textMuted}
-            multiline
-            onKeyPress={(e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
-              const keyEvent = e.nativeEvent as TextInputKeyPressEventData & {
-                shiftKey?: boolean;
-              };
-              if (
-                Platform.OS === 'web' &&
-                keyEvent.key === 'Enter' &&
-                !keyEvent.shiftKey
-              ) {
-                e.preventDefault();
-                if (canSend) onSubmit();
-              }
-            }}
-          />
-          {shouldShowActionButton ? (
-            <Pressable
-              onPress={canStop ? onStop : canSend ? onSubmit : undefined}
-              style={styles.sendBtn}
-              disabled={canStop ? isStopping : !canSend}
+          <View style={styles.inputWrapper}>
+            <Text
+              pointerEvents="none"
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              style={[
+                styles.inputMeasure,
+                {
+                  width: inputWidth,
+                  lineHeight: INPUT_TEXT_LINE_HEIGHT,
+                  paddingVertical: INPUT_TEXT_VERTICAL_PADDING,
+                },
+              ]}
+              onTextLayout={(event: NativeSyntheticEvent<TextLayoutEventData>) => {
+                if (inputWidth <= 0) {
+                  return;
+                }
+                const lineCount = Math.max(1, event.nativeEvent.lines.length);
+                const measuredHeight =
+                  lineCount * INPUT_TEXT_LINE_HEIGHT + INPUT_TEXT_VERTICAL_PADDING * 2;
+                updateInputHeight(measuredHeight);
+              }}
             >
-              {canStop ? (
-                <View style={styles.stopButtonContent}>
-                  <Ionicons name="square" size={10} color={colors.textPrimary} />
-                  <ActivityIndicator
-                    size="small"
-                    color={colors.textMuted}
-                    style={styles.stopButtonSpinner}
-                  />
-                </View>
-              ) : isLoading ? (
-                <ActivityIndicator size="small" color={colors.textMuted} />
-              ) : (
-                <Ionicons name="arrow-up" size={14} color={colors.textPrimary} />
-              )}
-            </Pressable>
-          ) : null}
+              {value.length > 0 ? `${value}\u200b` : ' '}
+            </Text>
+            <TextInput
+              style={[styles.input, { height: inputHeight }]}
+              value={value}
+              onChangeText={onChangeText}
+              onLayout={(event) => {
+                const nextWidth = Math.floor(event.nativeEvent.layout.width);
+                setInputWidth((previousWidth) =>
+                  previousWidth === nextWidth ? previousWidth : nextWidth
+                );
+              }}
+              onChange={(event: NativeSyntheticEvent<unknown>) => {
+                const nativeEvent = event.nativeEvent as {
+                  contentSize?: { height?: number };
+                };
+                const contentHeight = nativeEvent.contentSize?.height;
+                if (typeof contentHeight === 'number' && Number.isFinite(contentHeight)) {
+                  updateInputHeight(contentHeight);
+                }
+              }}
+              onFocus={onFocus}
+              placeholder={placeholder}
+              placeholderTextColor={colors.textMuted}
+              multiline
+              scrollEnabled={inputScrollEnabled}
+              onContentSizeChange={(event) => {
+                updateInputHeight(event.nativeEvent.contentSize.height);
+              }}
+              onKeyPress={(e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+                const keyEvent = e.nativeEvent as TextInputKeyPressEventData & {
+                  shiftKey?: boolean;
+                };
+                if (
+                  Platform.OS === 'web' &&
+                  keyEvent.key === 'Enter' &&
+                  !keyEvent.shiftKey
+                ) {
+                  e.preventDefault();
+                  if (canSend) onSubmit();
+                }
+              }}
+            />
+            {shouldShowActionButton ? (
+              <View style={styles.actionButtons}>
+                {showVoiceButton || voiceState !== 'idle' ? (
+                  voiceState === 'transcribing' ? (
+                    <View style={styles.sendBtn}>
+                      <ActivityIndicator size="small" color={colors.textMuted} />
+                    </View>
+                  ) : voiceState === 'recording' ? (
+                    <Pressable
+                      onPress={onVoiceToggle}
+                      style={[styles.sendBtn, styles.micBtnRecording]}
+                    >
+                      <Ionicons name="mic" size={14} color={colors.error} />
+                    </Pressable>
+                  ) : (
+                    <Pressable
+                      onPress={onVoiceToggle}
+                      style={styles.sendBtn}
+                    >
+                      <Ionicons name="mic-outline" size={14} color={colors.textMuted} />
+                    </Pressable>
+                  )
+                ) : null}
+                {canStop ? (
+                  <Pressable
+                    onPress={onStop}
+                    style={styles.sendBtn}
+                    disabled={isStopping}
+                  >
+                    <View style={styles.stopButtonContent}>
+                      <Ionicons name="square" size={10} color={colors.textPrimary} />
+                      <ActivityIndicator
+                        size="small"
+                        color={colors.textMuted}
+                        style={styles.stopButtonSpinner}
+                      />
+                    </View>
+                  </Pressable>
+                ) : null}
+                {showSendButton ? (
+                  <Pressable
+                    onPress={canSend ? onSubmit : undefined}
+                    style={styles.sendBtn}
+                    disabled={!canSend}
+                  >
+                    {isLoading && !canSend ? (
+                      <ActivityIndicator size="small" color={colors.textMuted} />
+                    ) : (
+                      <Ionicons name="arrow-up" size={14} color={colors.textPrimary} />
+                    )}
+                  </Pressable>
+                ) : null}
+              </View>
+            ) : null}
+          </View>
         </View>
       </View>
     </View>
@@ -141,14 +277,16 @@ export function ChatInput({
 }
 
 const styles = StyleSheet.create({
+  shell: {
+    overflow: 'hidden',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: colors.borderLight,
+  },
   container: {
     gap: spacing.xs,
     paddingHorizontal: spacing.lg,
     paddingVertical: spacing.md,
-    paddingBottom: Platform.OS === 'ios' ? spacing.lg : spacing.md,
-    backgroundColor: colors.bgMain,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: colors.borderLight,
+    backgroundColor: 'rgba(6, 9, 13, 0.42)',
   },
   row: {
     flexDirection: 'row',
@@ -213,7 +351,21 @@ const styles = StyleSheet.create({
     fontSize: 14,
     lineHeight: 20,
     paddingVertical: Platform.OS === 'ios' ? 2 : 0,
-    textAlignVertical: 'center',
+    textAlignVertical: 'top',
+  },
+  inputMeasure: {
+    position: 'absolute',
+    opacity: 0,
+    color: colors.textPrimary,
+    fontSize: 14,
+    left: spacing.md,
+    top: spacing.xs,
+  },
+  actionButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: spacing.xs,
+    gap: spacing.xs,
   },
   sendBtn: {
     width: 28,
@@ -222,7 +374,10 @@ const styles = StyleSheet.create({
     backgroundColor: colors.bgItem,
     alignItems: 'center',
     justifyContent: 'center',
-    marginLeft: spacing.xs,
+  },
+  micBtnRecording: {
+    borderWidth: 1.5,
+    borderColor: colors.error,
   },
   stopButtonContent: {
     width: 20,

package/apps/mobile/src/components/ChatMessage.tsx

@@ -1,13 +1,14 @@
 import { Ionicons } from '@expo/vector-icons';
-import { Platform, StyleSheet, Text, View, Image } from 'react-native';
+import { memo } from 'react';
+import { Image, Linking, Platform, StyleSheet, Text, View } from 'react-native';
 import Markdown, { type RenderRules } from 'react-native-markdown-display';
 import Animated, { FadeInUp, Layout } from 'react-native-reanimated';
 
-import type { ChatMessage } from '../api/types';
+import type { ChatMessage as ApiChatMessage } from '../api/types';
 import { colors, radius, spacing, typography } from '../theme';
 
 interface ChatMessageProps {
-  message: ChatMessage;
+  message: ApiChatMessage;
 }
 
 interface TimelineEntry {
@@ -15,7 +16,7 @@ interface TimelineEntry {
   details: string[];
 }
 
-export function ChatMessage({ message }: ChatMessageProps) {
+function ChatMessageComponent({ message }: ChatMessageProps) {
   const isUser = message.role === 'user';
 
   if (isUser) {
@@ -97,6 +98,28 @@ export function ChatMessage({ message }: ChatMessageProps) {
   );
 }
 
+function areChatMessagePropsEqual(
+  prevProps: ChatMessageProps,
+  nextProps: ChatMessageProps
+): boolean {
+  const previous = prevProps.message;
+  const next = nextProps.message;
+
+  if (previous === next) {
+    return true;
+  }
+
+  return (
+    previous.id === next.id &&
+    previous.role === next.role &&
+    previous.content === next.content &&
+    previous.createdAt === next.createdAt
+  );
+}
+
+export const ChatMessage = memo(ChatMessageComponent, areChatMessagePropsEqual);
+ChatMessage.displayName = 'ChatMessage';
+
 const monoFont = Platform.select({ ios: 'Menlo', default: 'monospace' });
 
 const markdownStyles = StyleSheet.create({
@@ -164,6 +187,35 @@ const markdownStyles = StyleSheet.create({
 });
 
 const markdownRules: RenderRules = {
+  link: (node, children, _parent, styles, onLinkPress) => {
+    const href = readMarkdownAttr(node.attributes.href);
+    if (!href) {
+      return (
+        <Text key={node.key} style={styles.link}>
+          {children}
+        </Text>
+      );
+    }
+
+    const localFileReference = toLocalFileReferenceLabel(href);
+    if (localFileReference) {
+      return (
+        <Text key={node.key} style={styles.code_inline}>
+          {localFileReference}
+        </Text>
+      );
+    }
+
+    return (
+      <Text
+        key={node.key}
+        style={styles.link}
+        onPress={() => openMarkdownLink(href, onLinkPress)}
+      >
+        {children}
+      </Text>
+    );
+  },
   image: (
     node,
     _children,
@@ -284,6 +336,58 @@ function readMarkdownAttr(value: unknown): string | null {
   return typeof value === 'string' && value.trim().length > 0 ? value : null;
 }
 
+function openMarkdownLink(
+  href: string,
+  onLinkPress?: (url: string) => boolean
+): void {
+  const shouldOpen = onLinkPress ? onLinkPress(href) !== false : true;
+  if (!shouldOpen) {
+    return;
+  }
+  void Linking.openURL(href).catch(() => {});
+}
+
+function toLocalFileReferenceLabel(href: string): string | null {
+  let normalizedHref = href.trim();
+  if (!normalizedHref) {
+    return null;
+  }
+
+  try {
+    normalizedHref = decodeURIComponent(normalizedHref);
+  } catch {
+    // Keep original href when decode fails.
+  }
+
+  if (normalizedHref.startsWith('file://')) {
+    normalizedHref = normalizedHref.replace(/^file:\/\//, '');
+  }
+
+  const isPosixPath = normalizedHref.startsWith('/');
+  const isWindowsPath = /^[A-Za-z]:[\\/]/.test(normalizedHref);
+  if (!isPosixPath && !isWindowsPath) {
+    return null;
+  }
+
+  const anchorLineMatch = normalizedHref.match(/#L(\d+)(?:C\d+)?$/i);
+  const suffixLineMatch = normalizedHref.match(/:(\d+)(?::\d+)?$/);
+
+  const line = anchorLineMatch?.[1] ?? suffixLineMatch?.[1] ?? null;
+  let pathOnly = normalizedHref;
+  if (anchorLineMatch) {
+    pathOnly = normalizedHref.slice(0, normalizedHref.length - anchorLineMatch[0].length);
+  } else if (suffixLineMatch) {
+    pathOnly = normalizedHref.slice(0, normalizedHref.length - suffixLineMatch[0].length);
+  }
+
+  const basename = pathOnly.split(/[\\/]/).filter(Boolean).pop();
+  if (!basename) {
+    return line ? `line ${line}` : null;
+  }
+
+  return line ? `${basename}:${line}` : basename;
+}
+
 function parseTimelineEntries(content: string): TimelineEntry[] | null {
   if (!content.includes('•')) {
     return null;

package/apps/mobile/src/config.ts

@@ -1,7 +1,10 @@
-const hostBridgeUrl =
-  process.env.EXPO_PUBLIC_HOST_BRIDGE_URL?.replace(/\/$/, '') ??
-  process.env.EXPO_PUBLIC_MAC_BRIDGE_URL?.replace(/\/$/, '') ??
-  'http://127.0.0.1:8787';
+import { isInsecureRemoteUrl, normalizeBridgeUrlInput } from './bridgeUrl';
+
+const legacyHostBridgeUrl = normalizeBridgeUrlInput(
+  process.env.EXPO_PUBLIC_HOST_BRIDGE_URL ??
+    process.env.EXPO_PUBLIC_MAC_BRIDGE_URL ??
+    ''
+);
 const hostBridgeToken =
   process.env.EXPO_PUBLIC_HOST_BRIDGE_TOKEN?.trim() ||
   process.env.EXPO_PUBLIC_MAC_BRIDGE_TOKEN?.trim() ||
@@ -19,16 +22,17 @@ const externalStatusFullSyncDebounceMs = parseNonNegativeIntEnv(
   450
 );
 
-if (isInsecureRemoteUrl(hostBridgeUrl) && !allowInsecureRemoteBridge) {
+if (legacyHostBridgeUrl && isInsecureRemoteUrl(legacyHostBridgeUrl) && !allowInsecureRemoteBridge) {
   console.warn(
-    'EXPO_PUBLIC_HOST_BRIDGE_URL uses http:// for a non-local host. Prefer https:// for remote host bridge access.'
+    'Using build-time bridge URL fallback from env. Configure bridge URL in-app from onboarding/settings when possible.'
   );
 }
 
 export const env = {
-  hostBridgeUrl,
+  legacyHostBridgeUrl,
   hostBridgeToken,
   allowWsQueryTokenAuth,
+  allowInsecureRemoteBridge,
   externalStatusFullSyncDebounceMs,
   privacyPolicyUrl,
   termsOfServiceUrl
@@ -51,25 +55,3 @@ function parseNonNegativeIntEnv(value: string | undefined, fallback: number): nu
 
   return parsed;
 }
-
-function isInsecureRemoteUrl(url: string): boolean {
-  try {
-    const parsed = new URL(url);
-    if (parsed.protocol !== 'http:') {
-      return false;
-    }
-
-    return !isLocalHost(parsed.hostname);
-  } catch {
-    return false;
-  }
-}
-
-function isLocalHost(hostname: string): boolean {
-  const normalized = hostname.trim().toLowerCase();
-  return (
-    normalized === 'localhost' ||
-    normalized === '127.0.0.1' ||
-    normalized === '::1'
-  );
-}