diff --git a/client/src/common/types.ts b/client/src/common/types.ts index e79bf2bddf..d3388b00d4 100644 --- a/client/src/common/types.ts +++ b/client/src/common/types.ts @@ -112,10 +112,12 @@ export interface NavProps { defaultActive?: string; } -interface ColumnMeta { - meta: { - size: number | string; - }; +export interface DataColumnMeta { + meta: + | { + size: number | string; + } + | undefined; } export enum Panel { @@ -157,7 +159,7 @@ export type AssistantPanelProps = { setActivePanel: React.Dispatch>; }; -export type AugmentedColumnDef = ColumnDef & ColumnMeta; +export type AugmentedColumnDef = ColumnDef & DataColumnMeta; export type TSetOption = SetOption; diff --git a/client/src/components/Chat/Input/Files/Table/DataTable.tsx b/client/src/components/Chat/Input/Files/Table/DataTable.tsx index 7b16920dd0..86a92a7fe3 100644 --- a/client/src/components/Chat/Input/Files/Table/DataTable.tsx +++ b/client/src/components/Chat/Input/Files/Table/DataTable.tsx @@ -43,7 +43,7 @@ interface DataTableProps { const contextMap = { [FileContext.filename]: 'com_ui_name', [FileContext.updatedAt]: 'com_ui_date', - [FileContext.source]: 'com_ui_storage', + [FileContext.filterSource]: 'com_ui_storage', [FileContext.context]: 'com_ui_context', [FileContext.bytes]: 'com_ui_size', }; @@ -108,13 +108,13 @@ export default function DataTable({ columns, data }: DataTablePro table.getColumn('filename')?.setFilterValue(event.target.value)} - className="max-w-sm border-border-light placeholder:text-text-secondary" + className="max-w-sm border-border-medium placeholder:text-text-secondary" /> - @@ -132,7 +132,7 @@ export default function DataTable({ columns, data }: DataTablePro key={column.id} className="cursor-pointer capitalize dark:text-white dark:hover:bg-gray-800" checked={column.getIsVisible()} - onCheckedChange={(value) => column.toggleVisibility(!!value)} + onCheckedChange={(value) => column.toggleVisibility(Boolean(value))} > {localize(contextMap[column.id])} @@ -184,7 +184,7 @@ export default function DataTable({ columns, data }: DataTablePro > {row.getVisibleCells().map((cell, index) => { const maxWidth = - (cell.column.columnDef as AugmentedColumnDef).meta.size ?? + (cell.column.columnDef as AugmentedColumnDef).meta?.size ?? 'auto'; const style: Style = {}; @@ -225,7 +225,7 @@ export default function DataTable({ columns, data }: DataTablePro )} @@ -138,7 +138,7 @@ export default function DataTableFile({ key={column.id} className="cursor-pointer capitalize dark:text-white dark:hover:bg-gray-800" checked={column.getIsVisible()} - onCheckedChange={(value) => column.toggleVisibility(!!value)} + onCheckedChange={(value) => column.toggleVisibility(Boolean(value))} > {localize(contextMap[column.id])} @@ -148,15 +148,11 @@ export default function DataTableFile({ table.getColumn('filename')?.setFilterValue(event.target.value)} - className="max-w-sm border-border-light placeholder:text-text-secondary" - /> - { - console.log('click'); - }} + className="max-w-sm border-border-medium placeholder:text-text-secondary" /> + console.log('click')} /> @@ -213,7 +209,7 @@ export default function DataTableFile({ > {row.getVisibleCells().map((cell, index) => { const maxWidth = - (cell.column.columnDef as AugmentedColumnDef).meta.size ?? + (cell.column.columnDef as AugmentedColumnDef).meta?.size ?? 'auto'; const style: Style = {}; diff --git a/client/src/components/Nav/NavLinks.tsx b/client/src/components/Nav/AccountSettings.tsx similarity index 60% rename from client/src/components/Nav/NavLinks.tsx rename to client/src/components/Nav/AccountSettings.tsx index c7d16a238c..f1fd026f9b 100644 --- a/client/src/components/Nav/NavLinks.tsx +++ b/client/src/components/Nav/AccountSettings.tsx @@ -15,7 +15,7 @@ import Logout from './Logout'; import { cn } from '~/utils/'; import store from '~/store'; -function NavLinks() { +function AccountSettings() { const localize = useLocalize(); const { user, isAuthenticated } = useAuthContext(); const { data: startupConfig } = useGetStartupConfig(); @@ -26,6 +26,7 @@ function NavLinks() { const [showFiles, setShowFiles] = useRecoilState(store.showFiles); const avatarSrc = useAvatar(user); + const name = user?.avatar ?? user?.username ?? ''; return ( <> @@ -33,15 +34,16 @@ function NavLinks() { {({ open }) => ( <>
- {!user?.avatar && !user?.username ? ( + {name.length === 0 ? (
) : ( - avatar + avatar )}
- {user?.name || user?.username || localize('com_nav_user')} + {user?.name ?? user?.username ?? localize('com_nav_user')}
@@ -75,47 +77,56 @@ function NavLinks() { leaveFrom="translate-y-0 opacity-100" leaveTo="translate-y-2 opacity-0" > - +
- {user?.email || localize('com_nav_user')} + {user?.email ?? localize('com_nav_user')}
-
- {startupConfig?.checkBalance && - balanceQuery.data && +
+ {startupConfig?.checkBalance === true && + balanceQuery.data != null && !isNaN(parseFloat(balanceQuery.data)) && ( <>
{`Balance: ${parseFloat(balanceQuery.data).toFixed(2)}`}
-
+
)} - - } - text={localize('com_nav_my_files')} - clickHandler={() => setShowFiles(true)} - /> + + {({ focus }) => ( + } + text={localize('com_nav_my_files')} + clickHandler={() => setShowFiles(true)} + /> + )} {startupConfig?.helpAndFaqURL !== '/' && ( - - } - text={localize('com_nav_help_faq')} - clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')} - /> + + {({ focus }) => ( + } + text={localize('com_nav_help_faq')} + clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')} + /> + )} )} - - } - text={localize('com_nav_settings')} - clickHandler={() => setShowSettings(true)} - /> + + {({ focus }) => ( + } + text={localize('com_nav_settings')} + clickHandler={() => setShowSettings(true)} + /> + )} -
- - +
+ + {({ focus }) => } @@ -128,4 +139,4 @@ function NavLinks() { ); } -export default memo(NavLinks); +export default memo(AccountSettings); diff --git a/client/src/components/Nav/Logout.tsx b/client/src/components/Nav/Logout.tsx index 7145dbbc3e..6b7d476d47 100644 --- a/client/src/components/Nav/Logout.tsx +++ b/client/src/components/Nav/Logout.tsx @@ -1,15 +1,20 @@ import { forwardRef } from 'react'; -import { LogOutIcon } from '../svg'; import { useAuthContext } from '~/hooks/AuthContext'; +import { LogOutIcon } from '~/components/svg'; import { useLocalize } from '~/hooks'; +import { cn } from '~/utils'; -const Logout = forwardRef(() => { +const Logout = forwardRef((props, ref) => { const { logout } = useAuthContext(); const localize = useLocalize(); return (
- +
diff --git a/client/src/components/Nav/NavLink.tsx b/client/src/components/Nav/NavLink.tsx index 823c68347b..598f2df429 100644 --- a/client/src/components/Nav/NavLink.tsx +++ b/client/src/components/Nav/NavLink.tsx @@ -9,14 +9,14 @@ interface Props { disabled?: boolean; } -const NavLink: FC = forwardRef((props, ref) => { +const NavLink: FC = forwardRef((props, ref) => { const { svg, text, clickHandler, disabled, className = '' } = props; const defaultProps: { className: string; onClick?: () => void; } = { className: cn( - 'flex gap-2 rounded p-2.5 text-sm cursor-pointer focus:ring-0 group items-center transition-colors duration-200 hover:bg-gray-500/10 dark:text-white dark:hover:bg-gray-600', + 'w-full flex gap-2 rounded p-2.5 text-sm cursor-pointer group items-center transition-colors duration-200 text-text-primary hover:bg-surface-hover', className, { 'opacity-50 pointer-events-none': disabled, @@ -29,10 +29,10 @@ const NavLink: FC = forwardRef((props, ref) => } return ( - + ); }); diff --git a/client/src/components/Nav/index.ts b/client/src/components/Nav/index.ts index 4a3de60076..895dc12b76 100644 --- a/client/src/components/Nav/index.ts +++ b/client/src/components/Nav/index.ts @@ -5,7 +5,6 @@ export { default as Logout } from './Logout'; export { default as MobileNav } from './MobileNav'; export { default as Nav } from './Nav'; export { default as NavLink } from './NavLink'; -export { default as NavLinks } from './NavLinks'; export { default as NewChat } from './NewChat'; export { default as SearchBar } from './SearchBar'; export { default as Settings } from './Settings'; diff --git a/client/src/localization/languages/Eng.ts b/client/src/localization/languages/Eng.ts index e24908ecd6..6243d90cb8 100644 --- a/client/src/localization/languages/Eng.ts +++ b/client/src/localization/languages/Eng.ts @@ -556,6 +556,7 @@ export default { com_endpoint_config_key_google_service_account: 'Create a Service Account', com_endpoint_config_key_google_vertex_api_role: 'Make sure to click \'Create and Continue\' to give at least the \'Vertex AI User\' role. Lastly, create a JSON key to import here.', + com_nav_account_settings: 'Account Settings', com_nav_font_size: 'Message Font Size', com_nav_font_size_xs: 'Extra Small', com_nav_font_size_sm: 'Small', diff --git a/packages/data-provider/src/types/files.ts b/packages/data-provider/src/types/files.ts index 8358549282..47a6e7c212 100644 --- a/packages/data-provider/src/types/files.ts +++ b/packages/data-provider/src/types/files.ts @@ -22,6 +22,7 @@ export enum FileContext { filename = 'filename', updatedAt = 'updatedAt', source = 'source', + filterSource = 'filterSource', context = 'context', bytes = 'bytes', }