diff --git a/apps/portal/package.json b/apps/portal/package.json index f954824c382..3f014468ce6 100644 --- a/apps/portal/package.json +++ b/apps/portal/package.json @@ -34,6 +34,7 @@ "remark-gfm": "4.0.1", "server-only": "^0.0.1", "shiki": "1.27.0", + "sonner": "2.0.6", "tailwind-merge": "^2.6.0", "tailwindcss-animate": "^1.0.7", "thirdweb": "workspace:*", diff --git a/apps/portal/src/app/chat/page.tsx b/apps/portal/src/app/chat/page.tsx index 8c9c068c065..d404db046c0 100644 --- a/apps/portal/src/app/chat/page.tsx +++ b/apps/portal/src/app/chat/page.tsx @@ -8,7 +8,7 @@ const queryClient = new QueryClient(); export default function ChatPage() { return ( -
+
diff --git a/apps/portal/src/app/layout.tsx b/apps/portal/src/app/layout.tsx index 068e41c2e59..705f9e4af29 100644 --- a/apps/portal/src/app/layout.tsx +++ b/apps/portal/src/app/layout.tsx @@ -43,7 +43,7 @@ export default function RootLayout({ enableSystem={false} > void; }) { return ( -
- +
+ {/* tw logo */} +
+
+
+ +
+
+
-

- How can I help you
- build onchain today? -

+ {/* title */} +

+ How can I help you
+ today? +

+ {/* prompts */}
{predefinedPrompts.map((prompt) => ( - - - )} -
- )} - - )} -
-
- ))} + +
+ {messages.map((message) => ( + + ))} +
+
+ + )} +
+ +
+ + +
+
+ ); +} + +const aiIcon = ( +
+ +
+); + +const userIcon = ( +
+ +
+); + +function RenderAIResponse(props: { + conversationId: string | undefined; + message: Message; +}) { + const thumbsUpFeedbackMutation = useMutation({ + mutationFn: () => { + if (!props.conversationId) { + throw new Error("No conversation ID"); + } + return sendFeedback(props.conversationId, 1); + }, + }); + + const thumbsDownFeedbackMutation = useMutation({ + mutationFn: () => { + if (!props.conversationId) { + throw new Error("No conversation ID"); + } + return sendFeedback(props.conversationId, -1); + }, + }); + + return ( +
+ {aiIcon} +
+ + + {props.conversationId && ( +
+ +
)}
-
-
- + ); +} + +function RenderMessage(props: { + message: Message; + conversationId: string | undefined; +}) { + if (props.message.role === "user") { + return ( +
+ {userIcon} +
+ -
-
- ); + ); + } + + if (props.message.role === "assistant" && props.message.isLoading) { + return ( +
+ {aiIcon} + +
+ ); + } + + if (props.message.role === "assistant" && !props.message.isLoading) { + return ( + + ); + } } function StyledMarkdownRenderer(props: { @@ -277,15 +371,16 @@ function StyledMarkdownRenderer(props: { }) { return ( diff --git a/apps/portal/src/components/Document/AuthMethodsTabs.tsx b/apps/portal/src/components/Document/AuthMethodsTabs.tsx index c8c4446e5a1..2a414908aab 100644 --- a/apps/portal/src/components/Document/AuthMethodsTabs.tsx +++ b/apps/portal/src/components/Document/AuthMethodsTabs.tsx @@ -365,7 +365,7 @@ function MyComponent() { // 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) function PrebuiltUIExample() { - const walletWithAuth = inAppWallet({ + const walletWithAuth = inAppWallet({ auth: { options: ["${authMethod}"] }, metadata: { name: "My App", @@ -380,9 +380,9 @@ function PrebuiltUIExample() { }); return ( - ); }`; @@ -445,7 +445,7 @@ function MyComponent() { } // 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) -const walletWithAuth = inAppWallet({ +const walletWithAuth = inAppWallet({ auth: { options: ["email"] }, metadata: { name: "My App", @@ -465,9 +465,9 @@ function PrebuiltUIExample() { console.log("Connected as:", activeAccount?.address); return ( - ); }`; @@ -527,7 +527,7 @@ function MyComponent() { // 3. Or use prebuilt UI components (ConnectButton/ConnectEmbed) function PrebuiltUIExample() { - const walletWithAuth = inAppWallet({ + const walletWithAuth = inAppWallet({ auth: { options: ["phone"] }, metadata: { name: "My App", @@ -542,9 +542,9 @@ function PrebuiltUIExample() { }); return ( - ); }`; @@ -718,8 +718,8 @@ const getUnitySnippet = (authMethod: AuthMethod): string => { `// Email authentication var inAppWalletOptions = new InAppWalletOptions(email: "user@example.com"); var options = new WalletOptions( - provider: WalletProvider.InAppWallet, - chainId: 1, + provider: WalletProvider.InAppWallet, + chainId: 1, inAppWalletOptions: inAppWalletOptions ); var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` @@ -731,8 +731,8 @@ var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` `// Phone authentication var inAppWalletOptions = new InAppWalletOptions(phoneNumber: "+1234567890"); var options = new WalletOptions( - provider: WalletProvider.InAppWallet, - chainId: 1, + provider: WalletProvider.InAppWallet, + chainId: 1, inAppWalletOptions: inAppWalletOptions ); var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` @@ -761,8 +761,8 @@ var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` `// ${providerMap[authMethod]} OAuth var inAppWalletOptions = new InAppWalletOptions(authprovider: AuthProvider.${providerMap[authMethod]}); var options = new WalletOptions( - provider: WalletProvider.InAppWallet, - chainId: 1, + provider: WalletProvider.InAppWallet, + chainId: 1, inAppWalletOptions: inAppWalletOptions ); var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` @@ -775,8 +775,8 @@ var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` `// Guest authentication var inAppWalletOptions = new InAppWalletOptions(authprovider: AuthProvider.Guest); var options = new WalletOptions( - provider: WalletProvider.InAppWallet, - chainId: 1, + provider: WalletProvider.InAppWallet, + chainId: 1, inAppWalletOptions: inAppWalletOptions ); var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` @@ -789,8 +789,8 @@ var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` var externalWallet = await PrivateKeyWallet.Create(client, "your-private-key"); var inAppWalletOptions = new InAppWalletOptions(authprovider: AuthProvider.Siwe, siweSigner: externalWallet); var options = new WalletOptions( - provider: WalletProvider.InAppWallet, - chainId: 1, + provider: WalletProvider.InAppWallet, + chainId: 1, inAppWalletOptions: inAppWalletOptions ); var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` @@ -802,8 +802,8 @@ var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` `// ${authMethod} authentication var inAppWalletOptions = new InAppWalletOptions(); var options = new WalletOptions( - provider: WalletProvider.InAppWallet, - chainId: 1, + provider: WalletProvider.InAppWallet, + chainId: 1, inAppWalletOptions: inAppWalletOptions ); var wallet = await ThirdwebManager.Instance.ConnectWallet(options);` @@ -914,25 +914,22 @@ function AuthMethodsTabsContent() {
- {getCodeSnippet(selectedAuth, platform.id).map( - (code, index) => ( - - key={index} - code={code} - lang={ - platform.id === "http" - ? "http" - : platform.id === "dotnet" || - platform.id === "unity" - ? "csharp" - : "typescript" - } - loader={} - className="text-sm" - /> - ), - )} + {getCodeSnippet(selectedAuth, platform.id).map((code) => ( + } + className="text-sm" + /> + ))}
diff --git a/apps/portal/src/components/Document/Breadcrumb.tsx b/apps/portal/src/components/Document/Breadcrumb.tsx index 6cb2820836c..fc6412464c5 100644 --- a/apps/portal/src/components/Document/Breadcrumb.tsx +++ b/apps/portal/src/components/Document/Breadcrumb.tsx @@ -8,7 +8,6 @@ type Crumb = { export function Breadcrumb(props: { crumbs: Crumb[] }) { return ( - // biome-ignore lint/nursery/useUniqueElementIds: this acts as a target for hrefs