Skip to content

Commit dfa20a3

Browse files
arnaudpfuarnaudpfu
committed
feat: Introduce ai-react-native package for chat primitives and markdown rendering, refactor ai-chat components, and update mobile/Next.js examples.
1 parent c37cb7b commit dfa20a3

File tree

170 files changed

+6480
-2905
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

170 files changed

+6480
-2905
lines changed

‎apps/mobile/.expo/devices.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"devices": [
33
{
44
"installationId": "FF1011A1-7709-4E6F-AF64-252B30FCADD0",
5-
"lastUsed": 1770842422644
5+
"lastUsed": 1770999837705
66
}
77
]
88
}

‎apps/mobile/.expo/prebuild/cached-packages.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"dependencies": "62e12000924490815307cbb3563a58ad4bd80acb",
3-
"devDependencies": "ae47ca99acc86f63163636de2f4b783604c9727c"
2+
"dependencies": "d5c59e4ee211f442b24973c3e0fa8747a0f65862",
3+
"devDependencies": "ecd8c49a15f0f4f419b87fdf9f54188443ccf587"
44
}

‎apps/mobile/@types/components.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// import { nativeComponents } from '@creatorem/ai-react-native/native-components';
2+
import { appNativeComponents } from '../components/ai-chat/components-provider';
3+
4+
// export type RuntimeComponents = typeof nativeComponents & typeof appNativeComponents;
5+
export type RuntimeComponents = typeof appNativeComponents;

‎apps/mobile/@types/i18next.d.ts‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎apps/mobile/@types/uniwind.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import 'uniwind';
2+
import { ThemeVariable } from '~/components/context/theme-provider';
3+
4+
5+
declare module 'uniwind' {
6+
export const useCSSVariable: (varName: ThemeVariable) => string
7+
}
8+
9+
export {}

‎apps/mobile/app.config.ts‎

Lines changed: 84 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,91 @@
1-
import { ConfigContext, ExpoConfig } from '@expo/config';
1+
import { ConfigContext, ExpoConfig } from "@expo/config";
22

33
export default ({ config }: ConfigContext): ExpoConfig => ({
4-
...config,
5-
runtimeVersion: '1.0.0',
6-
name: 'Creatorem AI Chat Demo',
7-
slug: 'creatorem-ai-chat-demo',
8-
version: '1.0.0',
9-
orientation: 'portrait',
10-
icon: './assets/pwa-logo/apple-icon-180.png',
11-
scheme: 'creatorem-ai-chat-demo',
12-
userInterfaceStyle: 'automatic',
13-
newArchEnabled: true,
14-
jsEngine: 'hermes',
15-
updates: {
16-
url: 'https://u.expo.dev/31ba4806-f6c8-44ad-b6ca-52e410442b55',
4+
...config,
5+
runtimeVersion: "1.0.0",
6+
name: "Creatorem AI",
7+
slug: "creatorem-ai-chat",
8+
version: "1.0.0",
9+
orientation: "portrait",
10+
icon: "./assets/pwa-logo/apple-icon-180.png",
11+
scheme: "creatorem-ai-chat-demo",
12+
userInterfaceStyle: "automatic",
13+
newArchEnabled: true,
14+
jsEngine: "hermes",
15+
updates: {
16+
url: "https://u.expo.dev/31ba4806-f6c8-44ad-b6ca-52e410442b55",
17+
},
18+
splash: {
19+
image: "./assets/pwa-logo/apple-splash-1242-2688.jpg",
20+
resizeMode: "contain",
21+
backgroundColor: "#ffffff",
22+
},
23+
ios: {
24+
jsEngine: "jsc",
25+
supportsTablet: true,
26+
bundleIdentifier: "com.creatorem.ai-chat-demo",
27+
},
28+
android: {
29+
// for native tabs
30+
softwareKeyboardLayoutMode: "pan",
31+
adaptiveIcon: {
32+
foregroundImage: './assets/pwa-logo/apple-icon-180.png',
33+
backgroundColor: "#ffffff",
1734
},
18-
splash: {
19-
image: './assets/pwa-logo/apple-splash-1242-2688.jpg',
20-
resizeMode: 'contain',
21-
backgroundColor: '#ffffff',
22-
},
23-
ios: {
24-
jsEngine: 'jsc',
25-
supportsTablet: true,
26-
bundleIdentifier: 'com.creatorem.ai-chat-demo',
27-
},
28-
android: {
29-
// for native tabs
30-
softwareKeyboardLayoutMode: 'pan',
31-
adaptiveIcon: {
32-
// foregroundImage: './assets/images/adaptive-icon.png',
33-
backgroundColor: '#ffffff',
34-
},
35-
package: 'com.creatorem.ai-chat-demo',
36-
edgeToEdgeEnabled: true,
37-
},
38-
web: {
39-
bundler: 'metro',
40-
output: 'static',
41-
favicon: './assets/pwa-logo/apple-icon-180.png',
42-
},
43-
plugins: [
44-
'expo-router',
45-
'expo-font',
46-
'expo-web-browser',
47-
[
48-
'expo-dev-client',
49-
{
50-
launchMode: 'most-recent',
51-
},
52-
],
53-
[
54-
'expo-secure-store',
55-
{
56-
configureAndroidBackup: true,
57-
faceIDPermission: 'Allow $(PRODUCT_NAME) to access your Face ID biometric data.',
58-
},
59-
],
60-
[
61-
'expo-splash-screen',
62-
{
63-
image: './assets/pwa-logo/apple-splash-1242-2688.jpg',
64-
imageWidth: 200,
65-
resizeMode: 'contain',
66-
backgroundColor: '#ffffff',
67-
},
68-
],
69-
[
70-
'expo-image-picker',
71-
{
72-
photosPermission: 'The app accesses your photos to let you share them with your friends.',
73-
},
74-
],
35+
package: "com.creatorem.ai-chat-demo",
36+
edgeToEdgeEnabled: true,
37+
},
38+
web: {
39+
bundler: "metro",
40+
output: "static",
41+
favicon: "./assets/pwa-logo/apple-icon-180.png",
42+
},
43+
plugins: [
44+
"expo-router",
45+
"expo-font",
46+
"expo-web-browser",
47+
"expo-audio",
48+
[
49+
"expo-dev-client",
50+
{
51+
launchMode: "most-recent",
52+
},
53+
],
54+
[
55+
"expo-secure-store",
56+
{
57+
configureAndroidBackup: true,
58+
faceIDPermission:
59+
"Allow $(PRODUCT_NAME) to access your Face ID biometric data.",
60+
},
61+
],
62+
[
63+
"expo-splash-screen",
64+
{
65+
image: "./assets/pwa-logo/apple-splash-1242-2688.jpg",
66+
imageWidth: 200,
67+
resizeMode: "contain",
68+
backgroundColor: "#ffffff",
69+
},
70+
],
71+
[
72+
"expo-image-picker",
73+
{
74+
photosPermission:
75+
"The app accesses your photos to let you share them with your friends.",
76+
},
7577
],
76-
experiments: {
77-
typedRoutes: true,
78-
reactCompiler: true,
78+
],
79+
experiments: {
80+
typedRoutes: true,
81+
reactCompiler: true,
82+
},
83+
extra: {
84+
router: {
85+
origin: false,
7986
},
80-
extra: {
81-
router: {
82-
origin: false,
83-
},
84-
eas: {
85-
projectId: '31ba4806-f6c8-44ad-b6ca-52e410442b55',
86-
},
87+
eas: {
88+
projectId: "31ba4806-f6c8-44ad-b6ca-52e410442b55",
8789
},
90+
},
8891
});

‎apps/mobile/app/(drawer)/_layout.tsx‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,64 @@
1-
import React from 'react';
2-
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
3-
import { useColorScheme } from 'react-native';
4-
import DrawerProvider from '~/components/drawer-context';
5-
import { Drawer } from 'expo-router/drawer';
6-
import { DrawerContent } from '~/components/drawer-content';
1+
import React from "react";
2+
import {
3+
DarkTheme,
4+
DefaultTheme,
5+
ThemeProvider,
6+
} from "@react-navigation/native";
7+
import { useColorScheme } from "react-native";
8+
import { DrawerProvider } from "~/components/context/drawer-context";
9+
import { Drawer } from "expo-router/drawer";
10+
import { DrawerContent } from "~/components/drawer-content";
11+
import { AiProvider } from "@creatorem/ai-react-native/ai-provider";
12+
import { useCSSVariable } from "uniwind";
13+
import { fetch as expoFetch } from "expo/fetch";
14+
import { appNativeComponents } from "~/components/ai-chat/components-provider";
715

8-
import 'react-native-reanimated';
16+
import "react-native-reanimated";
917

1018
export const drawerRef = React.createRef();
1119

12-
export const unstable_settings = {
13-
anchor: '(tabs)',
14-
};
15-
1620
export default function RootLayout() {
1721
const colorScheme = useColorScheme();
22+
const backgroundColor = useCSSVariable("--color-background");
1823

1924
return (
20-
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
21-
<DrawerProvider>
22-
<Drawer
23-
ref={drawerRef}
24-
screenOptions={{
25-
headerShown: false,
26-
drawerType: 'slide',
27-
drawerPosition: 'left',
28-
drawerStyle: {
29-
//backgroundColor: colors.bg,
30-
backgroundColor: 'red',
31-
width: '85%',
32-
flex: 1,
33-
},
34-
overlayColor: 'rgba(0,0,0, 0.4)',
35-
swipeEdgeWidth: 100
36-
}}
37-
drawerContent={(props) => <DrawerContent />}
38-
>
39-
<Drawer.Screen
40-
name="index"
41-
options={{
42-
title: 'Menu',
43-
drawerLabel: 'Menu',
44-
}}
45-
//redirect={true}
46-
/>
47-
48-
</Drawer>
25+
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
26+
<AiProvider
27+
components={appNativeComponents}
28+
chatOptions={{
29+
transportOptions: {
30+
api: "http://localhost:3000/api/chat",
31+
fetch: expoFetch as unknown as typeof globalThis.fetch,
32+
},
33+
}}
34+
>
35+
<DrawerProvider>
36+
<Drawer
37+
ref={drawerRef}
38+
screenOptions={{
39+
headerShown: false,
40+
drawerType: "slide",
41+
drawerPosition: "left",
42+
drawerStyle: {
43+
backgroundColor,
44+
width: "85%",
45+
flex: 1,
46+
},
47+
overlayColor: "rgba(0,0,0, 0.4)",
48+
swipeEdgeWidth: 100,
49+
}}
50+
drawerContent={() => <DrawerContent />}
51+
>
52+
<Drawer.Screen
53+
name="index"
54+
options={{
55+
title: "Menu",
56+
drawerLabel: "Menu",
57+
}}
58+
/>
59+
</Drawer>
4960
</DrawerProvider>
61+
</AiProvider>
5062
</ThemeProvider>
5163
);
5264
}

‎apps/mobile/app/(drawer)/index.tsx‎

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,32 @@
1-
import { View } from 'react-native';
2-
import { Header } from '~/components/header';
1+
import React from "react";
2+
import { Header } from "~/components/header";
3+
import { View, KeyboardAvoidingView, Platform } from "react-native";
4+
import { DrawerButton } from "~/components/drawer-button";
5+
import { ModelSwitch } from "~/components/model-switch";
6+
import { Thread } from "~/components/ai-chat/thread";
7+
8+
const HomeScreen = () => {
9+
const rightComponents = [<ModelSwitch key="model-switch" />];
10+
11+
const leftComponent = [<DrawerButton key="drawer-button" />];
312

4-
export default function HomeScreen() {
513
return (
6-
<View className="flex-1 bg-background">
7-
<Header />
8-
<View className="h-64 w-full flex-1 bg-orange-500" />
14+
<View className="relative flex-1 bg-background">
15+
<KeyboardAvoidingView
16+
behavior={Platform.OS === "ios" ? "padding" : undefined}
17+
keyboardVerticalOffset={0}
18+
style={{ flex: 1 }}
19+
>
20+
<Header
21+
leftComponent={leftComponent}
22+
rightComponents={rightComponents}
23+
/>
24+
<View className="flex-1">
25+
<Thread />
26+
</View>
27+
</KeyboardAvoidingView>
928
</View>
1029
);
11-
}
30+
};
31+
32+
export default HomeScreen;

0 commit comments

Comments
 (0)