wip: add webapp access control dialog

web/app/components/app/app-access-control/access-control-item.tsx

@@ -0,0 +1,25 @@
+'use client'
+import type { FC, PropsWithChildren } from 'react'
+
+type AccessControlItemProps = PropsWithChildren<{
+  active: boolean
+}>
+
+const AccessControlItem: FC<AccessControlItemProps> = ({ active, children }) => {
+  if (!active) {
+    return <div className="rounded-[10px] border-[1px] cursor-pointer
+      border-components-option-card-option-border bg-components-option-card-option-bg
+      hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover">
+      {children}
+    </div>
+  }
+
+  return <div className="rounded-[10px] border-[1.5px]
+  border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-sm">
+    {children}
+  </div>
+}
+
+AccessControlItem.displayName = 'AccessControlItem'
+
+export default AccessControlItem

web/app/components/app/app-access-control/index.tsx

@@ -1,8 +1,11 @@
 'use client'
 import { Dialog } from '@headlessui/react'
+import { RiBuildingLine, RiGlobalLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../base/button'
 import AccessControlDialog from './access-control-dialog'
+import AccessControlItem from './access-control-item'
+import SpecificGroupsOrMembers from './specific-groups-or-members'
 
 type AccessControlProps = {
   onClose: () => void
@@ -20,7 +23,21 @@ export default function AccessControl(props: AccessControlProps) {
         <div className='leading-6'>
           <p className='system-sm-medium'>{t('app.accessControlDialog.accessLabel')}</p>
         </div>
-
+        <AccessControlItem active={false}>
+          <div className='h-[40px] p-3 flex items-center gap-x-2'>
+            <RiBuildingLine className='w-4 h-4 text-text-primary' />
+            <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.organization')}</p>
+          </div>
+        </AccessControlItem>
+        <AccessControlItem active={true}>
+          <SpecificGroupsOrMembers active={true} />
+        </AccessControlItem>
+        <AccessControlItem active={false}>
+          <div className='h-[40px] p-3 flex items-center gap-x-2'>
+            <RiGlobalLine className='w-4 h-4 text-text-primary' />
+            <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.anyone')}</p>
+          </div>
+        </AccessControlItem>
       </div>
       <div className='flex items-center justify-end p-6 pt-5 gap-x-2'>
         <Button onClick={props.onClose}>{t('common.operation.cancel')}</Button>

web/app/components/app/app-access-control/specific-groups-or-members.tsx

@@ -0,0 +1,75 @@
+'use client'
+import { RiAddCircleFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Avatar from '../../base/avatar'
+import Button from '../../base/button'
+
+type SpecificGroupsOrMembersProps = {
+  active: boolean
+}
+
+export default function SpecificGroupsOrMembers(props: SpecificGroupsOrMembersProps) {
+  const { active } = props
+  const { t } = useTranslation()
+  if (!active) {
+    return <div className='h-[40px] p-3 flex items-center gap-x-2'>
+      <RiLockLine className='w-4 h-4 text-text-primary' />
+      <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
+    </div>
+  }
+
+  return <div>
+    <div className='flex items-center gap-x-1 p-3'>
+      <div className='grow flex items-center gap-x-1'>
+        <RiLockLine className='w-4 h-4 text-text-primary' />
+        <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.specific')}</p>
+      </div>
+      <Button variant='ghost-accent' size='small' className='shrink-0 flex items-center gap-x-0.5'>
+        <RiAddCircleFill className='w-4 h-4' />
+        <span>{t('common.operation.add')}</span>
+      </Button>
+    </div>
+    <div className='px-1 pb-1'>
+      <div className='bg-background-section rounded-lg p-2 flex flex-col gap-y-2'>
+        <p className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.accessControlDialog.groups', { count: 1 })}</p>
+        <div className='flex flex-row flex-wrap gap-1'>
+          <GroupItem />
+        </div>
+        <p className='system-2xs-medium-uppercase text-text-tertiary'>{t('app.accessControlDialog.members', { count: 4 })}</p>
+        <div className='flex flex-row flex-wrap gap-1'>
+          <MemberItem />
+        </div>
+      </div>
+    </div>
+  </div >
+}
+function GroupItem() {
+  return <BaseItem icon={<RiOrganizationChart className='w-[14px] h-[14px] text-components-avatar-shape-fill-stop-0' />}>
+    <p className='system-xs-regular text-text-primary'>Group Name</p>
+    <p className='system-xs-regular text-text-tertiary'>7</p>
+  </BaseItem>
+}
+
+function MemberItem() {
+  return <BaseItem icon={<Avatar className='w-[14px] h-[14px]' textClassName='text-[12px]' avatar={null} name='M' />}>
+    <p className='system-xs-regular text-text-primary'>Member Name</p>
+  </BaseItem>
+}
+
+type BaseItemProps = {
+  icon: React.ReactNode
+  children: React.ReactNode
+}
+function BaseItem({ icon, children }: BaseItemProps) {
+  return <div className='rounded-full border-[0.5px] bg-components-badge-white-to-dark shadow-xs p-1 pr-1.5 group flex items-center flex-row gap-x-1'>
+    <div className='w-5 h-5 rounded-full bg-components-icon-bg-blue-solid overflow-hidden'>
+      <div className='w-full h-full flex items-center justify-center bg-access-app-icon-mask-bg'>
+        {icon}
+      </div>
+    </div>
+    {children}
+    <div className='flex items-center justify-center w-4 h-4 cursor-pointer'>
+      <RiCloseCircleFill className='w-[14px] h-[14px] text-text-quaternary' />
+    </div>
+  </div>
+}

web/i18n/en-US/app.ts

@@ -184,6 +184,10 @@ const translation = {
       specific: 'Specific groups or members',
       organization: 'Only members within the organization',
     },
+    groups_one: '{{count}} GROUP',
+    groups_other: '{{count}} GROUPS',
+    members_one: '{{count}} MEMBER',
+    members_other: '{{count}} MEMBERS',
   },
 }
 

web/i18n/zh-Hans/app.ts

@@ -185,6 +185,10 @@ const translation = {
       specific: '特定组或用户',
       organization: '组织内的任何人',
     },
+    groups_one: '{{count}} 个组',
+    groups_other: '{{count}} 个组',
+    members_one: '{{count}} 个人',
+    members_other: '{{count}} 个人',
   },
 }
 

web/tailwind.config.js

@@ -107,6 +107,7 @@ const config = {
         'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
         'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
         'dataset-chunk-list-mask-bg': 'var(--color-dataset-chunk-list-mask-bg)',
+        'access-app-icon-mask-bg': 'var(--color-access-app-icon-mask-bg)',
       },
       lineClamp: {
         '20': '20',

web/themes/manual-dark.css

@@ -1,35 +1,26 @@
 html[data-theme="dark"] {
-  --color-chatbot-bg: linear-gradient(
+    --color-chatbot-bg: linear-gradient(180deg,
-    180deg,
+            rgba(34, 34, 37, 0.9) 0%,
-    rgba(34, 34, 37, 0.9) 0%,
+            rgba(29, 29, 32, 0.9) 90.48%);
-    rgba(29, 29, 32, 0.9) 90.48%
+    --color-chat-bubble-bg: linear-gradient(180deg,
-  );
+            rgba(200, 206, 218, 0.08) 0%,
-  --color-chat-bubble-bg: linear-gradient(
+            rgba(200, 206, 218, 0.02) 100%);
-    180deg,
+    --color-workflow-process-bg: linear-gradient(90deg,
-    rgba(200, 206, 218, 0.08) 0%,
+            rgba(24, 24, 27, 0.25) 0%,
-    rgba(200, 206, 218, 0.02) 100%
+            rgba(24, 24, 27, 0.04) 100%);
-  );
+    --color-account-teams-bg: linear-gradient(271deg,
-  --color-workflow-process-bg: linear-gradient(
+            rgba(34, 34, 37, 0.9) -0.1%,
-    90deg,
+            rgba(29, 29, 32, 0.9) 98.26%);
-    rgba(24, 24, 27, 0.25) 0%,
+    --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
-    rgba(24, 24, 27, 0.04) 100%
+    --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
-  );
+    --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
-  --color-account-teams-bg: linear-gradient(
+    --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
-    271deg,
+    --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
-    rgba(34, 34, 37, 0.9) -0.1%,
+    --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
-    rgba(29, 29, 32, 0.9) 98.26%
+    --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
-  );
+    --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
-  --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
+    --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
-  --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
+            rgba(24, 24, 27, 0.08) 0%,
-  --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
+            rgba(0, 0, 0, 0) 100%);
-  --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
+    --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
-  --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
-  --mask-top2bottom-gray-50-to-transparent: linear-gradient(
-    180deg,
-    rgba(24, 24, 27, 0.08) 0%,
-    rgba(0, 0, 0, 0) 100%
-  );
 }

web/themes/manual-light.css

@@ -1,35 +1,26 @@
 html[data-theme="light"] {
-  --color-chatbot-bg: linear-gradient(
+    --color-chatbot-bg: linear-gradient(180deg,
-    180deg,
+            rgba(249, 250, 251, 0.9) 0%,
-    rgba(249, 250, 251, 0.9) 0%,
+            rgba(242, 244, 247, 0.9) 90.48%);
-    rgba(242, 244, 247, 0.9) 90.48%
+    --color-chat-bubble-bg: linear-gradient(180deg,
-  );
+            #fff 0%,
-  --color-chat-bubble-bg: linear-gradient(
+            rgba(255, 255, 255, 0.6) 100%);
-    180deg,
+    --color-workflow-process-bg: linear-gradient(90deg,
-    #fff 0%,
+            rgba(200, 206, 218, 0.2) 0%,
-    rgba(255, 255, 255, 0.6) 100%
+            rgba(200, 206, 218, 0.04) 100%);
-  );
+    --color-account-teams-bg: linear-gradient(271deg,
-  --color-workflow-process-bg: linear-gradient(
+            rgba(249, 250, 251, 0.9) -0.1%,
-    90deg,
+            rgba(242, 244, 247, 0.9) 98.26%);
-    rgba(200, 206, 218, 0.2) 0%,
+    --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
-    rgba(200, 206, 218, 0.04) 100%
+    --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
-  );
+    --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
-  --color-account-teams-bg: linear-gradient(
+    --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
-    271deg,
+    --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
-    rgba(249, 250, 251, 0.9) -0.1%,
+    --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
-    rgba(242, 244, 247, 0.9) 98.26%
+    --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
-  );
+    --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
-  --color-dataset-chunk-process-success-bg: linear-gradient(92deg, rgba(23, 178, 106, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
+    --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
-  --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
+            rgba(200, 206, 218, 0.2) 0%,
-  --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
+            rgba(255, 255, 255, 0) 100%);
-  --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
+    --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
-  --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
-  --mask-top2bottom-gray-50-to-transparent: linear-gradient(
-    180deg,
-    rgba(200, 206, 218, 0.2) 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
 }