Update @radix-ui/themes to v3 (#63)

Author: blrchen

README.md

@@ -79,16 +79,16 @@ For OpenAI account:
 | Name                | Description                                                                                             | Default Value            |
 | ------------------- | ------------------------------------------------------------------------------------------------------- | ------------------------ |
 | OPENAI_API_BASE_URL | Use if you plan to use a reverse proxy for `api.openai.com`.                                            | `https://api.openai.com` |
-| OPENAI_API_KEY      | Secret key string obtained from the [OpenAI API website](https://platform.openai.com/account/api-keys). |
+| OPENAI_API_KEY      | Secret key string obtained from the [OpenAI API website](https://platform.openai.com/account/api-keys). |                          |
 | OPENAI_MODEL        | Model of GPT used                                                                                       | `gpt-3.5-turbo`          |
 
 For Azure OpenAI account:
 
-| Name                      | Description                                    |
-| ------------------------- | ---------------------------------------------- |
-| AZURE_OPENAI_API_BASE_URL | Endpoint (e.g., https://xxx.openai.azure.com). |
-| AZURE_OPENAI_API_KEY      | Key                                            |
-| AZURE_OPENAI_DEPLOYMENT   | Model deployment name                          |
+| Name                      | Description                                      |
+| ------------------------- | ------------------------------------------------ |
+| AZURE_OPENAI_API_BASE_URL | Endpoint (e.g., <https://xxx.openai.azure.com>). |
+| AZURE_OPENAI_API_KEY      | Key                                              |
+| AZURE_OPENAI_DEPLOYMENT   | Model deployment name                            |
 
 ## Contribution
 

README.zh-CN.md

@@ -79,16 +79,16 @@ OpenAI账户环境变量：
 | 名称                | 描述                                                                               | 默认值                   |
 | ------------------- | ---------------------------------------------------------------------------------- | ------------------------ |
 | OPENAI_API_BASE_URL | 如需为`api.openai.com`使用反向代理，请使用此变量。                                 | `https://api.openai.com` |
-| OPENAI_API_KEY      | 从[OpenAI API网站](https://platform.openai.com/account/api-keys)获取的密钥字符串。 |
+| OPENAI_API_KEY      | 从[OpenAI API网站](https://platform.openai.com/account/api-keys)获取的密钥字符串。 |                          |
 | OPENAI_MODEL        | GPT模型                                                                            | `gpt-3.5-turbo`          |
 
 Azure OpenAI账户环境变量：
 
-| 名称                      | 描述                                       |
-| ------------------------- | ------------------------------------------ |
-| AZURE_OPENAI_API_BASE_URL | 端点（如，https://xxx.openai.azure.com）。 |
-| AZURE_OPENAI_API_KEY      | 密钥                                       |
-| AZURE_OPENAI_DEPLOYMENT   | 模型部署名称                               |
+| 名称                      | 描述                                         |
+| ------------------------- | -------------------------------------------- |
+| AZURE_OPENAI_API_BASE_URL | 端点（如，<https://xxx.openai.azure.com）。> |
+| AZURE_OPENAI_API_KEY      | 密钥                                         |
+| AZURE_OPENAI_DEPLOYMENT   | 模型部署名称                                 |
 
 ## 贡献
 

app/chat/PersonaModal.tsx

@@ -31,7 +31,7 @@ const PersonaModal = () => {
         <Dialog.Description size="2" mb="4"></Dialog.Description>
         <form onSubmit={formSubmit}>
           <Flex direction="column" gap="3">
-            <TextField.Input placeholder="Name" {...register('name', { required: true })} />
+            <TextField.Root placeholder="Name" {...register('name', { required: true })} />
             <TextArea placeholder="Prompt" rows={7} {...register('prompt', { required: true })} />
           </Flex>
           <Flex gap="3" mt="4" justify="end">

app/chat/PersonaPanel.tsx

@@ -65,7 +65,7 @@ const PersonaPanel = (_props: PersonaPanelProps) => {
       width="100%"
       height="100%"
       className="absolute top-0 z-10 flex-1"
-      style={{ backgroundColor: 'var(--color-page-background)' }}
+      style={{ backgroundColor: 'var(--color-background)' }}
     >
       <Flex
         justify="between"
@@ -87,17 +87,18 @@ const PersonaPanel = (_props: PersonaPanelProps) => {
       </Flex>
       <Container size="3" className="grow-0 px-4">
         <Flex gap="4" py="5">
-          <TextField.Root size="3" className="flex-1" radius="large">
+          <TextField.Root
+            size="3"
+            className="flex-1"
+            radius="large"
+            placeholder="Search Persona Template"
+            onChange={({ target }) => {
+              setSearchText(target.value)
+            }}
+          >
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
             </TextField.Slot>
-            <TextField.Input
-              className="flex-1"
-              placeholder="Search Persona Template"
-              onChange={({ target }) => {
-                setSearchText(target.value)
-              }}
-            />
           </TextField.Root>
           <Button size="3" radius="large" variant="surface" onClick={onOpenPersonaModal}>
             Create

app/layout.tsx

@@ -20,7 +20,7 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
       <body>
         <ThemesProvider>
           <Header />

components/Chat/ChatSideBar.tsx

@@ -24,7 +24,7 @@ export const ChatSideBar = () => {
   } = useContext(ChatContext)
 
   return (
-    <Flex direction="column" className={cs('chart-side-bar', { show: toggleSidebar })}>
+    <Flex direction="column" className={cs('chat-side-bar', { show: toggleSidebar })}>
       <Flex className="p-2 h-full overflow-hidden w-64" direction="column" gap="3">
         <Box
           width="auto"
@@ -34,7 +34,7 @@ export const ChatSideBar = () => {
           <FiPlus className="size-4" />
           <Text>New Chat</Text>
         </Box>
-        <ScrollArea className="flex-1" type="auto" scrollbars="vertical">
+        <ScrollArea className="flex-1 " style={{ width: '100%' }} type="auto">
           <Flex direction="column" gap="3">
             {chatList.map((chat) => (
               <Box
@@ -45,7 +45,7 @@ export const ChatSideBar = () => {
                 })}
                 onClick={() => onChangeChat?.(chat)}
               >
-                <Flex gap="2" align="center">
+                <Flex gap="2" align="center" className="overflow-hidden whitespace-nowrap">
                   <BiMessageDetail className="size-4" />
                   <Text as="p" className="truncate">
                     {chat.persona?.name}

components/Chat/index.scss

@@ -12,7 +12,7 @@
   }
 }
 
-.chart-side-bar {
+.chat-side-bar {
   @apply overflow-hidden w-64 z-10;
 
   background-color: var(--color-background);
@@ -22,6 +22,7 @@
 
   .rt-ScrollAreaViewport > div {
     display: block;
+    width: 100%;
   }
 
   > div {

components/Link.tsx

@@ -1,7 +1,8 @@
-import { GetPropDefTypes, Link as RadixLink, linkPropDefs } from '@radix-ui/themes'
+import { ComponentProps } from 'react'
+import { Link as RadixLink } from '@radix-ui/themes'
 import NextLink from 'next/link'
 
-type LinkOwnProps = GetPropDefTypes<typeof linkPropDefs>
+type LinkOwnProps = ComponentProps<typeof RadixLink>
 
 interface LinkProps {
   href: string