@salesforce/ui-bundle-template-feature-react-customer-web-client-chat 11.52.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.txt +82 -0
- package/README.md +63 -0
- package/dist/.forceignore +15 -0
- package/dist/.husky/pre-commit +4 -0
- package/dist/.prettierignore +11 -0
- package/dist/.prettierrc +17 -0
- package/dist/CHANGELOG.md +4553 -0
- package/dist/README.md +77 -0
- package/dist/config/project-scratch-def.json +13 -0
- package/dist/eslint.config.js +7 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/.forceignore +15 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/.graphqlrc.yml +2 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/.prettierignore +9 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/.prettierrc +11 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/CHANGELOG.md +10 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/README.md +75 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/codegen.yml +95 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/components.json +18 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/e2e/app.spec.ts +17 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/eslint.config.js +169 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/feature-react-customer-web-client-chat.uibundle-meta.xml +7 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/index.html +12 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/package.json +76 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/playwright.config.ts +24 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/scripts/get-graphql-schema.mjs +71 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/scripts/rewrite-e2e-assets.mjs +23 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/api/graphqlClient.ts +44 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/app.tsx +17 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/appLayout.tsx +83 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/icons/book.svg +3 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/icons/copy.svg +4 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/icons/rocket.svg +3 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/icons/star.svg +3 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/images/codey-1.png +0 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/images/codey-2.png +0 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/images/codey-3.png +0 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/assets/images/vibe-codey.svg +194 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/CustomerWebClientChat.tsx +74 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/alerts/status-alert.tsx +52 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/layouts/card-layout.tsx +29 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/alert.tsx +76 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/avatar.tsx +109 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/badge.tsx +48 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/breadcrumb.tsx +109 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/button.tsx +67 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/calendar.tsx +232 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/card.tsx +103 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/checkbox.tsx +32 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/collapsible.tsx +33 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/datePicker.tsx +127 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/dialog.tsx +162 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/dropdown-menu.tsx +257 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/field.tsx +237 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/index.ts +109 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/input.tsx +19 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/label.tsx +22 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/pagination.tsx +132 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/popover.tsx +89 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/select.tsx +193 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/separator.tsx +26 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/skeleton.tsx +14 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/sonner.tsx +20 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/spinner.tsx +16 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/table.tsx +121 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/ui/tabs.tsx +88 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/hooks/useAsyncData.ts +67 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/index.ts +6 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/lib/utils.ts +6 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/navigationMenu.tsx +80 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/pages/Home.tsx +12 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/pages/NotFound.tsx +18 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/pages/TestChatPage.tsx +26 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/router-utils.tsx +35 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/routes.tsx +28 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/styles/global.css +135 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/types/chat.ts +36 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/tsconfig.json +45 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/tsconfig.node.json +13 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/tsconfig.tsbuildinfo +1 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/ui-bundle.json +7 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/vite-env.d.ts +4 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/vite.config.ts +106 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/vitest-env.d.ts +2 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/vitest.config.ts +11 -0
- package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/vitest.setup.ts +1 -0
- package/dist/jest.config.js +6 -0
- package/dist/package-lock.json +10066 -0
- package/dist/package.json +46 -0
- package/dist/scripts/apex/hello.apex +10 -0
- package/dist/scripts/gitignore-templates.json +4 -0
- package/dist/scripts/graphql-search.sh +191 -0
- package/dist/scripts/org-setup-config-schema.mjs +120 -0
- package/dist/scripts/org-setup-dev.mjs +87 -0
- package/dist/scripts/org-setup-utils.mjs +569 -0
- package/dist/scripts/org-setup-xml.mjs +182 -0
- package/dist/scripts/org-setup.config.json +5 -0
- package/dist/scripts/org-setup.mjs +2345 -0
- package/dist/scripts/sf-project-setup.mjs +103 -0
- package/dist/scripts/soql/account.soql +6 -0
- package/dist/scripts/validate-org-setup-config.mjs +38 -0
- package/dist/sfdx-project.json +12 -0
- package/package.json +51 -0
- package/src/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/components/CustomerWebClientChat.tsx +74 -0
- package/src/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/index.ts +6 -0
- package/src/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/pages/TestChatPage.tsx +26 -0
- package/src/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/routes.tsx +23 -0
- package/src/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/types/chat.ts +36 -0
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { Tabs as TabsPrimitive } from 'radix-ui';
|
|
4
|
+
|
|
5
|
+
import { cn } from '../../lib/utils';
|
|
6
|
+
|
|
7
|
+
function Tabs({
|
|
8
|
+
className,
|
|
9
|
+
orientation = 'horizontal',
|
|
10
|
+
...props
|
|
11
|
+
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
|
12
|
+
return (
|
|
13
|
+
<TabsPrimitive.Root
|
|
14
|
+
data-slot="tabs"
|
|
15
|
+
data-orientation={orientation}
|
|
16
|
+
className={cn(
|
|
17
|
+
'gap-2 group/tabs flex data-horizontal:flex-col',
|
|
18
|
+
className
|
|
19
|
+
)}
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const tabsListVariants = cva(
|
|
26
|
+
'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col',
|
|
27
|
+
{
|
|
28
|
+
variants: {
|
|
29
|
+
variant: {
|
|
30
|
+
default: 'bg-muted',
|
|
31
|
+
line: 'gap-1 bg-transparent',
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
variant: 'default',
|
|
36
|
+
},
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
function TabsList({
|
|
41
|
+
className,
|
|
42
|
+
variant = 'default',
|
|
43
|
+
...props
|
|
44
|
+
}: React.ComponentProps<typeof TabsPrimitive.List> &
|
|
45
|
+
VariantProps<typeof tabsListVariants>) {
|
|
46
|
+
return (
|
|
47
|
+
<TabsPrimitive.List
|
|
48
|
+
data-slot="tabs-list"
|
|
49
|
+
data-variant={variant}
|
|
50
|
+
className={cn(tabsListVariants({ variant }), className)}
|
|
51
|
+
{...props}
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function TabsTrigger({
|
|
57
|
+
className,
|
|
58
|
+
...props
|
|
59
|
+
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
|
60
|
+
return (
|
|
61
|
+
<TabsPrimitive.Trigger
|
|
62
|
+
data-slot="tabs-trigger"
|
|
63
|
+
className={cn(
|
|
64
|
+
"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
65
|
+
'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
|
|
66
|
+
'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
|
|
67
|
+
'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
|
|
68
|
+
className
|
|
69
|
+
)}
|
|
70
|
+
{...props}
|
|
71
|
+
/>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function TabsContent({
|
|
76
|
+
className,
|
|
77
|
+
...props
|
|
78
|
+
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
|
79
|
+
return (
|
|
80
|
+
<TabsPrimitive.Content
|
|
81
|
+
data-slot="tabs-content"
|
|
82
|
+
className={cn('text-sm flex-1 outline-none', className)}
|
|
83
|
+
{...props}
|
|
84
|
+
/>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
interface UseAsyncDataResult<T> {
|
|
4
|
+
data: T | null;
|
|
5
|
+
loading: boolean;
|
|
6
|
+
error: string | null;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Runs an async fetcher on mount and whenever `deps` change.
|
|
11
|
+
* Returns the loading/error/data state. Does not cache — every call
|
|
12
|
+
* to the fetcher hits the source directly.
|
|
13
|
+
*
|
|
14
|
+
* A cleanup flag prevents state updates if the component unmounts
|
|
15
|
+
* or deps change before the fetch completes (avoids React warnings
|
|
16
|
+
* and stale updates from out-of-order responses).
|
|
17
|
+
*/
|
|
18
|
+
export function useAsyncData<T>(
|
|
19
|
+
fetcher: () => Promise<T>,
|
|
20
|
+
deps: React.DependencyList
|
|
21
|
+
): UseAsyncDataResult<T> {
|
|
22
|
+
const [data, setData] = useState<T | null>(null);
|
|
23
|
+
const [loading, setLoading] = useState(true);
|
|
24
|
+
const [error, setError] = useState<string | null>(null);
|
|
25
|
+
const [generation, setGeneration] = useState(0);
|
|
26
|
+
|
|
27
|
+
const fetcherRef = useRef(fetcher);
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
fetcherRef.current = fetcher;
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// Detect dep changes during render to reset loading state and bump generation
|
|
33
|
+
const [prevDeps, setPrevDeps] = useState(deps);
|
|
34
|
+
if (
|
|
35
|
+
deps.length !== prevDeps.length ||
|
|
36
|
+
deps.some((d, i) => d !== prevDeps[i])
|
|
37
|
+
) {
|
|
38
|
+
setPrevDeps(deps);
|
|
39
|
+
setGeneration(g => g + 1);
|
|
40
|
+
if (!loading) setLoading(true);
|
|
41
|
+
if (error !== null) setError(null);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
let cancelled = false;
|
|
46
|
+
|
|
47
|
+
fetcherRef
|
|
48
|
+
.current()
|
|
49
|
+
.then(result => {
|
|
50
|
+
if (!cancelled) setData(result);
|
|
51
|
+
})
|
|
52
|
+
.catch(err => {
|
|
53
|
+
console.error(err);
|
|
54
|
+
if (!cancelled)
|
|
55
|
+
setError(err instanceof Error ? err.message : 'An error occurred');
|
|
56
|
+
})
|
|
57
|
+
.finally(() => {
|
|
58
|
+
if (!cancelled) setLoading(false);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
return () => {
|
|
62
|
+
cancelled = true;
|
|
63
|
+
};
|
|
64
|
+
}, [generation]);
|
|
65
|
+
|
|
66
|
+
return { data, loading, error };
|
|
67
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { Link, useLocation } from 'react-router';
|
|
2
|
+
import { getAllRoutes } from './router-utils';
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
|
|
5
|
+
export default function NavigationMenu() {
|
|
6
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
7
|
+
const location = useLocation();
|
|
8
|
+
|
|
9
|
+
const isActive = (path: string) => location.pathname === path;
|
|
10
|
+
|
|
11
|
+
const toggleMenu = () => setIsOpen(!isOpen);
|
|
12
|
+
|
|
13
|
+
const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
|
|
14
|
+
.filter(
|
|
15
|
+
route =>
|
|
16
|
+
route.handle?.showInNavigation === true &&
|
|
17
|
+
route.fullPath !== undefined &&
|
|
18
|
+
route.handle?.label !== undefined
|
|
19
|
+
)
|
|
20
|
+
.map(
|
|
21
|
+
route =>
|
|
22
|
+
({
|
|
23
|
+
path: route.fullPath,
|
|
24
|
+
label: route.handle?.label,
|
|
25
|
+
}) as { path: string; label: string }
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<nav className="bg-white border-b border-gray-200">
|
|
30
|
+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
31
|
+
<div className="flex justify-between items-center h-16">
|
|
32
|
+
<Link to="/" className="text-xl font-semibold text-gray-900">
|
|
33
|
+
React App
|
|
34
|
+
</Link>
|
|
35
|
+
<button
|
|
36
|
+
onClick={toggleMenu}
|
|
37
|
+
className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
38
|
+
aria-label="Toggle menu"
|
|
39
|
+
>
|
|
40
|
+
<div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
|
|
41
|
+
<span
|
|
42
|
+
className={`block h-0.5 w-6 bg-current transition-all ${
|
|
43
|
+
isOpen ? 'rotate-45 translate-y-2' : ''
|
|
44
|
+
}`}
|
|
45
|
+
/>
|
|
46
|
+
<span
|
|
47
|
+
className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
|
|
48
|
+
/>
|
|
49
|
+
<span
|
|
50
|
+
className={`block h-0.5 w-6 bg-current transition-all ${
|
|
51
|
+
isOpen ? '-rotate-45 -translate-y-2' : ''
|
|
52
|
+
}`}
|
|
53
|
+
/>
|
|
54
|
+
</div>
|
|
55
|
+
</button>
|
|
56
|
+
</div>
|
|
57
|
+
{isOpen && (
|
|
58
|
+
<div className="pb-4">
|
|
59
|
+
<div className="flex flex-col space-y-2">
|
|
60
|
+
{navigationRoutes.map(item => (
|
|
61
|
+
<Link
|
|
62
|
+
key={item.path}
|
|
63
|
+
to={item.path}
|
|
64
|
+
onClick={() => setIsOpen(false)}
|
|
65
|
+
className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
|
66
|
+
isActive(item.path)
|
|
67
|
+
? 'bg-blue-100 text-blue-700'
|
|
68
|
+
: 'text-gray-700 hover:bg-gray-100'
|
|
69
|
+
}`}
|
|
70
|
+
>
|
|
71
|
+
{item.label}
|
|
72
|
+
</Link>
|
|
73
|
+
))}
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
)}
|
|
77
|
+
</div>
|
|
78
|
+
</nav>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export default function Home() {
|
|
2
|
+
return (
|
|
3
|
+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
4
|
+
<div className="text-center">
|
|
5
|
+
<h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
|
|
6
|
+
<p className="text-lg text-gray-600 mb-8">
|
|
7
|
+
Welcome to your React application.
|
|
8
|
+
</p>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
);
|
|
12
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Link } from 'react-router';
|
|
2
|
+
|
|
3
|
+
export default function NotFound() {
|
|
4
|
+
return (
|
|
5
|
+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
6
|
+
<div className="text-center">
|
|
7
|
+
<h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
|
|
8
|
+
<p className="text-lg text-gray-600 mb-8">Page not found</p>
|
|
9
|
+
<Link
|
|
10
|
+
to="/"
|
|
11
|
+
className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
12
|
+
>
|
|
13
|
+
Go to Home
|
|
14
|
+
</Link>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, Salesforce, Inc.
|
|
3
|
+
* All rights reserved.
|
|
4
|
+
* For full license text, see the LICENSE.txt file
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import CustomerWebClientChat from "../components/CustomerWebClientChat";
|
|
8
|
+
|
|
9
|
+
export default function TestChatPage() {
|
|
10
|
+
return (
|
|
11
|
+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
12
|
+
<div className="text-center">
|
|
13
|
+
<h1 className="text-4xl font-bold text-gray-900 mb-4">Chat</h1>
|
|
14
|
+
<p className="text-lg text-gray-600 mb-8">
|
|
15
|
+
Welcome to your Customer Web Client chat application.
|
|
16
|
+
</p>
|
|
17
|
+
</div>
|
|
18
|
+
<CustomerWebClientChat
|
|
19
|
+
orgId="<ORG_ID_15_OR_18_CHAR_00D...>"
|
|
20
|
+
deploymentName="<EMBEDDED_SERVICE_DEPLOYMENT_NAME>"
|
|
21
|
+
siteURL="<SITE_URL>"
|
|
22
|
+
scrt2URL="<SCRT2_URL>"
|
|
23
|
+
/>
|
|
24
|
+
</div>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { RouteObject } from 'react-router';
|
|
2
|
+
import { routes } from './routes';
|
|
3
|
+
|
|
4
|
+
export type RouteWithFullPath = RouteObject & { fullPath: string };
|
|
5
|
+
|
|
6
|
+
const flatMapRoutes = (
|
|
7
|
+
route: RouteObject,
|
|
8
|
+
parentPath: string = ''
|
|
9
|
+
): RouteWithFullPath[] => {
|
|
10
|
+
let fullPath: string;
|
|
11
|
+
|
|
12
|
+
if (route.index) {
|
|
13
|
+
fullPath = parentPath || '/';
|
|
14
|
+
} else if (route.path) {
|
|
15
|
+
if (route.path.startsWith('/')) {
|
|
16
|
+
fullPath = route.path;
|
|
17
|
+
} else {
|
|
18
|
+
fullPath =
|
|
19
|
+
parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
|
|
20
|
+
}
|
|
21
|
+
} else {
|
|
22
|
+
fullPath = parentPath;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const routeWithPath = { ...route, fullPath };
|
|
26
|
+
|
|
27
|
+
const childRoutes =
|
|
28
|
+
route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
|
|
29
|
+
|
|
30
|
+
return [routeWithPath, ...childRoutes];
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const getAllRoutes = (): RouteWithFullPath[] => {
|
|
34
|
+
return routes.flatMap(route => flatMapRoutes(route));
|
|
35
|
+
};
|
package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/src/routes.tsx
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { RouteObject } from 'react-router';
|
|
2
|
+
import AppLayout from './appLayout';
|
|
3
|
+
import Home from './pages/Home';
|
|
4
|
+
import NotFound from './pages/NotFound';
|
|
5
|
+
import TestChatPage from "./pages/TestChatPage";
|
|
6
|
+
|
|
7
|
+
export const routes: RouteObject[] = [
|
|
8
|
+
{
|
|
9
|
+
path: "/",
|
|
10
|
+
element: <AppLayout />,
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
index: true,
|
|
14
|
+
element: <Home />,
|
|
15
|
+
handle: { showInNavigation: true, label: 'Home' }
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
path: "test-chat",
|
|
19
|
+
element: <TestChatPage />,
|
|
20
|
+
handle: { showInNavigation: true, label: "Test Chat" }
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
path: '*',
|
|
24
|
+
element: <NotFound />
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
}
|
|
28
|
+
];
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
@import 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
@layer base {
|
|
4
|
+
html,
|
|
5
|
+
body,
|
|
6
|
+
#root {
|
|
7
|
+
@apply min-h-screen;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
@apply antialiased bg-white;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@import 'tw-animate-css';
|
|
16
|
+
@import 'shadcn/tailwind.css';
|
|
17
|
+
|
|
18
|
+
@custom-variant dark (&:is(.dark *));
|
|
19
|
+
|
|
20
|
+
@theme inline {
|
|
21
|
+
--color-background: var(--background);
|
|
22
|
+
--color-foreground: var(--foreground);
|
|
23
|
+
--color-card: var(--card);
|
|
24
|
+
--color-card-foreground: var(--card-foreground);
|
|
25
|
+
--color-popover: var(--popover);
|
|
26
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
27
|
+
--color-primary: var(--primary);
|
|
28
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
29
|
+
--color-secondary: var(--secondary);
|
|
30
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
31
|
+
--color-muted: var(--muted);
|
|
32
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
33
|
+
--color-accent: var(--accent);
|
|
34
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
35
|
+
--color-destructive: var(--destructive);
|
|
36
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
37
|
+
--color-border: var(--border);
|
|
38
|
+
--color-input: var(--input);
|
|
39
|
+
--color-ring: var(--ring);
|
|
40
|
+
--color-chart-1: var(--chart-1);
|
|
41
|
+
--color-chart-2: var(--chart-2);
|
|
42
|
+
--color-chart-3: var(--chart-3);
|
|
43
|
+
--color-chart-4: var(--chart-4);
|
|
44
|
+
--color-chart-5: var(--chart-5);
|
|
45
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
46
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
47
|
+
--radius-lg: var(--radius);
|
|
48
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
49
|
+
--color-sidebar: var(--sidebar);
|
|
50
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
51
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
52
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
53
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
54
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
55
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
56
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:root {
|
|
60
|
+
--radius: 0.625rem;
|
|
61
|
+
--background: oklch(1 0 0);
|
|
62
|
+
--foreground: oklch(0.145 0 0);
|
|
63
|
+
--card: oklch(1 0 0);
|
|
64
|
+
--card-foreground: oklch(0.145 0 0);
|
|
65
|
+
--popover: oklch(1 0 0);
|
|
66
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
67
|
+
--primary: oklch(0.205 0 0);
|
|
68
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
69
|
+
--secondary: oklch(0.97 0 0);
|
|
70
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
71
|
+
--muted: oklch(0.97 0 0);
|
|
72
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
73
|
+
--accent: oklch(0.97 0 0);
|
|
74
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
75
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
76
|
+
--border: oklch(0.922 0 0);
|
|
77
|
+
--input: oklch(0.922 0 0);
|
|
78
|
+
--ring: oklch(0.708 0 0);
|
|
79
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
80
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
81
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
82
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
83
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
84
|
+
--sidebar: oklch(0.985 0 0);
|
|
85
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
86
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
87
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
88
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
89
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
90
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
91
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.dark {
|
|
95
|
+
--background: oklch(0.145 0 0);
|
|
96
|
+
--foreground: oklch(0.985 0 0);
|
|
97
|
+
--card: oklch(0.205 0 0);
|
|
98
|
+
--card-foreground: oklch(0.985 0 0);
|
|
99
|
+
--popover: oklch(0.205 0 0);
|
|
100
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
101
|
+
--primary: oklch(0.922 0 0);
|
|
102
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
103
|
+
--secondary: oklch(0.269 0 0);
|
|
104
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
105
|
+
--muted: oklch(0.269 0 0);
|
|
106
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
107
|
+
--accent: oklch(0.269 0 0);
|
|
108
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
109
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
110
|
+
--border: oklch(1 0 0 / 10%);
|
|
111
|
+
--input: oklch(1 0 0 / 15%);
|
|
112
|
+
--ring: oklch(0.556 0 0);
|
|
113
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
114
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
115
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
116
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
117
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
118
|
+
--sidebar: oklch(0.205 0 0);
|
|
119
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
120
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
121
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
122
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
123
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
124
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
125
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@layer base {
|
|
129
|
+
* {
|
|
130
|
+
@apply border-border outline-ring/50;
|
|
131
|
+
}
|
|
132
|
+
body {
|
|
133
|
+
@apply bg-background text-foreground;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2026, Salesforce, Inc.
|
|
3
|
+
* All rights reserved.
|
|
4
|
+
* For full license text, see the LICENSE.txt file
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/** Shape of the Embedded Messaging bootstrap global injected by the site's bootstrap.js. */
|
|
8
|
+
export interface WindowWithCwcProperties extends Window {
|
|
9
|
+
embeddedservice_bootstrap?: {
|
|
10
|
+
settings: {
|
|
11
|
+
language: string;
|
|
12
|
+
devMode?: boolean;
|
|
13
|
+
};
|
|
14
|
+
init: (
|
|
15
|
+
orgId: string,
|
|
16
|
+
deploymentName: string,
|
|
17
|
+
siteURL: string,
|
|
18
|
+
options: { scrt2URL: string },
|
|
19
|
+
) => void;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export interface CustomerWebClientChatProps {
|
|
24
|
+
/** The organization id (15- or 18-char Salesforce id starting with `00D`). */
|
|
25
|
+
orgId: string;
|
|
26
|
+
/** The Embedded Service deployment / channel name the agent is connected to. */
|
|
27
|
+
deploymentName: string;
|
|
28
|
+
/** The ESW site URL. Usually contains `ESW` and the deployment name. */
|
|
29
|
+
siteURL: string;
|
|
30
|
+
/** The SCRT2 (Service Cloud Real-Time) chat service URL. Usually contains `scrt`. */
|
|
31
|
+
scrt2URL: string;
|
|
32
|
+
/** Optional chat language. Defaults to `"en"`. */
|
|
33
|
+
language?: string;
|
|
34
|
+
/** Optional. Enables Embedded Messaging dev mode. Defaults to `false`. */
|
|
35
|
+
devMode?: boolean;
|
|
36
|
+
}
|
package/dist/force-app/main/default/uiBundles/feature-react-customer-web-client-chat/tsconfig.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
|
|
9
|
+
/* Bundler mode */
|
|
10
|
+
"moduleResolution": "bundler",
|
|
11
|
+
"allowImportingTsExtensions": true,
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"isolatedModules": true,
|
|
14
|
+
"noEmit": true,
|
|
15
|
+
"jsx": "react-jsx",
|
|
16
|
+
|
|
17
|
+
/* Linting */
|
|
18
|
+
"strict": true,
|
|
19
|
+
"noUnusedLocals": true,
|
|
20
|
+
"noUnusedParameters": true,
|
|
21
|
+
"noFallthroughCasesInSwitch": true,
|
|
22
|
+
|
|
23
|
+
/* Path mapping */
|
|
24
|
+
"paths": {
|
|
25
|
+
"@/*": ["./src/*"],
|
|
26
|
+
"@api/*": ["./src/api/*"],
|
|
27
|
+
"@components/*": ["./src/components/*"],
|
|
28
|
+
"@utils/*": ["./src/utils/*"],
|
|
29
|
+
"@styles/*": ["./src/styles/*"],
|
|
30
|
+
"@assets/*": ["./src/assets/*"],
|
|
31
|
+
"@salesforce/platform-sdk": [
|
|
32
|
+
"../../../../../../../../../../packages/sdk/platform-sdk/src/index.ts"
|
|
33
|
+
]
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"include": [
|
|
37
|
+
"src",
|
|
38
|
+
"e2e",
|
|
39
|
+
"vite-env.d.ts",
|
|
40
|
+
"vitest-env.d.ts",
|
|
41
|
+
"vitest.setup.ts",
|
|
42
|
+
"../../../../../../../../../../packages/sdk/platform-sdk/types"
|
|
43
|
+
],
|
|
44
|
+
"references": [{ "path": "./tsconfig.node.json" }]
|
|
45
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"composite": true,
|
|
4
|
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
5
|
+
"skipLibCheck": true,
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"moduleResolution": "bundler",
|
|
8
|
+
"allowSyntheticDefaultImports": true,
|
|
9
|
+
"strict": true,
|
|
10
|
+
"outDir": "./build"
|
|
11
|
+
},
|
|
12
|
+
"include": ["vite.config.ts"]
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"root":["./src/app.tsx","./src/appLayout.tsx","./src/index.ts","./src/navigationMenu.tsx","./src/router-utils.tsx","./src/routes.tsx","./src/api/graphqlClient.ts","./src/components/CustomerWebClientChat.tsx","./src/components/alerts/status-alert.tsx","./src/components/layouts/card-layout.tsx","./src/components/ui/alert.tsx","./src/components/ui/avatar.tsx","./src/components/ui/badge.tsx","./src/components/ui/breadcrumb.tsx","./src/components/ui/button.tsx","./src/components/ui/calendar.tsx","./src/components/ui/card.tsx","./src/components/ui/checkbox.tsx","./src/components/ui/collapsible.tsx","./src/components/ui/datePicker.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/field.tsx","./src/components/ui/index.ts","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/pagination.tsx","./src/components/ui/popover.tsx","./src/components/ui/select.tsx","./src/components/ui/separator.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/sonner.tsx","./src/components/ui/spinner.tsx","./src/components/ui/table.tsx","./src/components/ui/tabs.tsx","./src/hooks/useAsyncData.ts","./src/lib/utils.ts","./src/pages/Home.tsx","./src/pages/NotFound.tsx","./src/pages/TestChatPage.tsx","./src/types/chat.ts","./e2e/app.spec.ts","./vite-env.d.ts","./vitest-env.d.ts","./vitest.setup.ts","../../../../../../../../../sdk/platform-sdk/types/env.d.ts"],"version":"5.9.3"}
|