@super_studio/ecforce-ai-agent-react 0.6.0-canary.3 → 0.6.0-canary.5
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/dist/components/chatbot-frame.d.ts +6 -4
- package/dist/components/chatbot-frame.d.ts.map +1 -1
- package/dist/components/provider/chatbot-provider.d.ts +4 -0
- package/dist/components/provider/chatbot-provider.d.ts.map +1 -1
- package/dist/components/provider/use-chatbot-frame-handler.d.ts +6 -1
- package/dist/components/provider/use-chatbot-frame-handler.d.ts.map +1 -1
- package/dist/components/provider/use-chatbot-window-states.d.ts +2 -0
- package/dist/components/provider/use-chatbot-window-states.d.ts.map +1 -1
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/index.js +46 -16
- package/dist/index.mjs +46 -16
- package/dist/styles/chatbot-sheet.css +10 -2
- package/package.json +1 -1
- package/src/components/chatbot-frame.tsx +16 -14
- package/src/components/provider/chatbot-provider.tsx +16 -2
- package/src/components/provider/use-chatbot-frame-handler.tsx +10 -0
- package/src/components/provider/use-chatbot-window-states.tsx +10 -1
- package/src/components/sheet.tsx +12 -3
- package/src/styles/chatbot-sheet.css +10 -2
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
export type ChatbotFrameProps = {
|
|
2
|
-
/** 管理画面上のエージェントID */
|
|
3
|
-
agentId: string;
|
|
4
2
|
/** 初期化時のチャットID */
|
|
5
|
-
|
|
3
|
+
initialConfig?: {
|
|
4
|
+
agentId?: string;
|
|
5
|
+
chatId?: string;
|
|
6
|
+
model?: string;
|
|
7
|
+
};
|
|
6
8
|
/** アプリ名のメタデータ */
|
|
7
9
|
appName?: string;
|
|
8
10
|
/** セッションを取得するための関数 */
|
|
@@ -25,7 +27,7 @@ export type ChatbotFrameProps = {
|
|
|
25
27
|
url?: string;
|
|
26
28
|
className?: string;
|
|
27
29
|
};
|
|
28
|
-
export declare function ChatbotFrame({
|
|
30
|
+
export declare function ChatbotFrame({ appName, initialConfig, getSession, enabled, url, className, }: ChatbotFrameProps): import("react/jsx-runtime").JSX.Element;
|
|
29
31
|
export type SessionData = {
|
|
30
32
|
token: string;
|
|
31
33
|
expiresAt: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chatbot-frame.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-frame.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,
|
|
1
|
+
{"version":3,"file":"chatbot-frame.d.ts","sourceRoot":"","sources":["../../src/components/chatbot-frame.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kBAAkB;IAClB,aAAa,CAAC,EAAE;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,iBAAiB;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QACzB,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,aAAa,EACb,UAAU,EACV,OAAc,EACd,GAAG,EACH,SAAS,GACV,EAAE,iBAAiB,2CAiEnB;AAsBD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,EAAE,eAAe,sBAuCzD"}
|
|
@@ -11,6 +11,10 @@ type ChatbotContextType = {
|
|
|
11
11
|
isExpanded: boolean;
|
|
12
12
|
/** チャットボットを展開する */
|
|
13
13
|
setIsExpanded: (expanded: boolean) => void;
|
|
14
|
+
/** チャットボットをフルスクリーンにしているか */
|
|
15
|
+
isFullScreen: boolean;
|
|
16
|
+
/** チャットボットをフルスクリーンにする */
|
|
17
|
+
setIsFullScreen: (fullScreen: boolean) => void;
|
|
14
18
|
/** チャットボットを初期化 */
|
|
15
19
|
init: (props: InitProps) => void;
|
|
16
20
|
/** MCPを設定 */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chatbot-provider.d.ts","sourceRoot":"","sources":["../../../src/components/provider/chatbot-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,6BAA6B,CAAC;AAGrC,KAAK,kBAAkB,GAAG;IACxB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sBAAsB;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,kBAAkB;IAClB,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,aAAa;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B,cAAc;IACd,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB;IACnB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,qBAAqB;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D,CAAC;AAMF,wBAAgB,UAAU,uBAMzB;AAED,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"chatbot-provider.d.ts","sourceRoot":"","sources":["../../../src/components/provider/chatbot-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,6BAA6B,CAAC;AAGrC,KAAK,kBAAkB,GAAG;IACxB,gCAAgC;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,iBAAiB;IACjB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,sBAAsB;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,4BAA4B;IAC5B,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,eAAe,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,kBAAkB;IAClB,IAAI,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACjC,aAAa;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IAC/B,cAAc;IACd,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB;IACnB,eAAe,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,qBAAqB;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,WAAW,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3D,CAAC;AAMF,wBAAgB,UAAU,uBAMzB;AAED,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CA4CjE"}
|
|
@@ -9,6 +9,10 @@ export type IframeMessage = {
|
|
|
9
9
|
type: "EXPAND_CHATBOT";
|
|
10
10
|
} | {
|
|
11
11
|
type: "SHRINK_CHATBOT";
|
|
12
|
+
} | {
|
|
13
|
+
type: "FULLSCREEN_CHATBOT";
|
|
14
|
+
} | {
|
|
15
|
+
type: "EXIT_FULLSCREEN_CHATBOT";
|
|
12
16
|
} | {
|
|
13
17
|
type: "RELOAD_CHATBOT";
|
|
14
18
|
};
|
|
@@ -37,9 +41,10 @@ export type ParentMessage = {
|
|
|
37
41
|
appName?: string;
|
|
38
42
|
sessionToken?: string;
|
|
39
43
|
};
|
|
40
|
-
export declare function useChatbotFrameHandler({ setOpen, setIsExpanded, }: {
|
|
44
|
+
export declare function useChatbotFrameHandler({ setOpen, setIsExpanded, setIsFullScreen, }: {
|
|
41
45
|
setOpen: (open: boolean) => void;
|
|
42
46
|
setIsExpanded: (expanded: boolean) => void;
|
|
47
|
+
setIsFullScreen: (fullScreen: boolean) => void;
|
|
43
48
|
}): {
|
|
44
49
|
init: (props: InitProps) => void;
|
|
45
50
|
setMcps: (mcps: MCP[]) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chatbot-frame-handler.d.ts","sourceRoot":"","sources":["../../../src/components/provider/use-chatbot-frame-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,qBAAqB,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;CACb,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,GACD;IACE,IAAI,EAAE,cAAc,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEN,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,aAAa,
|
|
1
|
+
{"version":3,"file":"use-chatbot-frame-handler.d.ts","sourceRoot":"","sources":["../../../src/components/provider/use-chatbot-frame-handler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,qBAAqB,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE,GACzB;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,oBAAoB,CAAA;CAAE,GAC9B;IAAE,IAAI,EAAE,yBAAyB,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAE/B,MAAM,MAAM,GAAG,GAAG;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;CACb,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,GACD;IACE,IAAI,EAAE,cAAc,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACtB,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEN,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,aAAa,EACb,eAAe,GAChB,EAAE;IACD,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,aAAa,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,eAAe,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD;kBAqBW,SAAS;oBAUV,GAAG,EAAE;0BAOF,MAAM;oCAOD,MAAM;;;;EAoExB"}
|
|
@@ -3,7 +3,9 @@ export declare function useChatbotWindowStates(): {
|
|
|
3
3
|
hasOpened: boolean;
|
|
4
4
|
open: boolean;
|
|
5
5
|
isExpanded: boolean;
|
|
6
|
+
isFullScreen: boolean;
|
|
6
7
|
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
7
8
|
setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
9
|
+
setIsFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
8
10
|
};
|
|
9
11
|
//# sourceMappingURL=use-chatbot-window-states.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-chatbot-window-states.d.ts","sourceRoot":"","sources":["../../../src/components/provider/use-chatbot-window-states.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,sBAAsB
|
|
1
|
+
{"version":3,"file":"use-chatbot-window-states.d.ts","sourceRoot":"","sources":["../../../src/components/provider/use-chatbot-window-states.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,wBAAgB,sBAAsB;;;;;;;;EAqBrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAW5E;AAED,QAAA,MAAM,YAAY,mKAUhB,CAAC;AAGH,QAAA,MAAM,UAAU,iKAUd,CAAC;AASH,QAAA,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/components/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAW5E;AAED,QAAA,MAAM,YAAY,mKAUhB,CAAC;AAGH,QAAA,MAAM,UAAU,iKAUd,CAAC;AASH,QAAA,MAAM,YAAY,6JAyChB,CAAC;AAGH,QAAA,MAAM,WAAW,6GAUf,CAAC;AAGH,QAAA,MAAM,WAAW,6GAUf,CAAC;AAGH,QAAA,MAAM,UAAU,mKAUd,CAAC;AAGH,QAAA,MAAM,gBAAgB,6KAUpB,CAAC;AAGH,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -38,7 +38,8 @@ var _react = require('react'); var React5 = _interopRequireWildcard(_react); var
|
|
|
38
38
|
|
|
39
39
|
function useChatbotFrameHandler({
|
|
40
40
|
setOpen,
|
|
41
|
-
setIsExpanded
|
|
41
|
+
setIsExpanded,
|
|
42
|
+
setIsFullScreen
|
|
42
43
|
}) {
|
|
43
44
|
const [iframeEl, setIframeEl] = React5.default.useState(
|
|
44
45
|
null
|
|
@@ -108,6 +109,12 @@ function useChatbotFrameHandler({
|
|
|
108
109
|
case "SHRINK_CHATBOT":
|
|
109
110
|
setIsExpanded(false);
|
|
110
111
|
break;
|
|
112
|
+
case "FULLSCREEN_CHATBOT":
|
|
113
|
+
setIsFullScreen(true);
|
|
114
|
+
break;
|
|
115
|
+
case "EXIT_FULLSCREEN_CHATBOT":
|
|
116
|
+
setIsFullScreen(false);
|
|
117
|
+
break;
|
|
111
118
|
case "RELOAD_CHATBOT":
|
|
112
119
|
iframe.src = iframe.src;
|
|
113
120
|
break;
|
|
@@ -139,12 +146,21 @@ function useChatbotWindowStates() {
|
|
|
139
146
|
const [hasOpened, setHasOpened] = React5.default.useState(false);
|
|
140
147
|
const [open, setOpen] = React5.default.useState(false);
|
|
141
148
|
const [isExpanded, setIsExpanded] = React5.default.useState(false);
|
|
149
|
+
const [isFullScreen, setIsFullScreen] = React5.default.useState(false);
|
|
142
150
|
React5.default.useEffect(() => {
|
|
143
151
|
if (open) {
|
|
144
152
|
setHasOpened(true);
|
|
145
153
|
}
|
|
146
154
|
}, [open]);
|
|
147
|
-
return {
|
|
155
|
+
return {
|
|
156
|
+
hasOpened,
|
|
157
|
+
open,
|
|
158
|
+
isExpanded,
|
|
159
|
+
isFullScreen,
|
|
160
|
+
setOpen,
|
|
161
|
+
setIsExpanded,
|
|
162
|
+
setIsFullScreen
|
|
163
|
+
};
|
|
148
164
|
}
|
|
149
165
|
|
|
150
166
|
// src/components/provider/chatbot-provider.tsx
|
|
@@ -160,7 +176,15 @@ function useChatbot() {
|
|
|
160
176
|
return context;
|
|
161
177
|
}
|
|
162
178
|
function ChatbotProvider({ children }) {
|
|
163
|
-
const {
|
|
179
|
+
const {
|
|
180
|
+
hasOpened,
|
|
181
|
+
open,
|
|
182
|
+
isExpanded,
|
|
183
|
+
isFullScreen,
|
|
184
|
+
setOpen,
|
|
185
|
+
setIsExpanded,
|
|
186
|
+
setIsFullScreen
|
|
187
|
+
} = useChatbotWindowStates();
|
|
164
188
|
const {
|
|
165
189
|
setMcps,
|
|
166
190
|
setAppName,
|
|
@@ -171,7 +195,8 @@ function ChatbotProvider({ children }) {
|
|
|
171
195
|
setIframeEl
|
|
172
196
|
} = useChatbotFrameHandler({
|
|
173
197
|
setOpen,
|
|
174
|
-
setIsExpanded
|
|
198
|
+
setIsExpanded,
|
|
199
|
+
setIsFullScreen
|
|
175
200
|
});
|
|
176
201
|
const value = {
|
|
177
202
|
hasOpened,
|
|
@@ -179,6 +204,8 @@ function ChatbotProvider({ children }) {
|
|
|
179
204
|
setOpen,
|
|
180
205
|
isExpanded,
|
|
181
206
|
setIsExpanded,
|
|
207
|
+
isFullScreen,
|
|
208
|
+
setIsFullScreen,
|
|
182
209
|
setSessionToken,
|
|
183
210
|
init,
|
|
184
211
|
setMcps,
|
|
@@ -199,9 +226,8 @@ var PROD_CHATBOT_URL = "https://agent.ec-force.com";
|
|
|
199
226
|
// src/components/chatbot-frame.tsx
|
|
200
227
|
|
|
201
228
|
function ChatbotFrame({
|
|
202
|
-
agentId,
|
|
203
229
|
appName,
|
|
204
|
-
|
|
230
|
+
initialConfig,
|
|
205
231
|
getSession,
|
|
206
232
|
enabled = true,
|
|
207
233
|
url,
|
|
@@ -247,8 +273,7 @@ function ChatbotFrame({
|
|
|
247
273
|
ref: setIframeEl,
|
|
248
274
|
src: buildIframeUrl({
|
|
249
275
|
baseUrl,
|
|
250
|
-
|
|
251
|
-
initialChatId
|
|
276
|
+
initialConfig
|
|
252
277
|
}),
|
|
253
278
|
className,
|
|
254
279
|
allow: "clipboard-write",
|
|
@@ -261,12 +286,11 @@ function ChatbotFrame({
|
|
|
261
286
|
}
|
|
262
287
|
function buildIframeUrl({
|
|
263
288
|
baseUrl,
|
|
264
|
-
|
|
265
|
-
initialChatId
|
|
289
|
+
initialConfig
|
|
266
290
|
}) {
|
|
267
|
-
const url = new URL(`/embed
|
|
268
|
-
if (
|
|
269
|
-
url.searchParams.set("
|
|
291
|
+
const url = new URL(`/embed`, baseUrl);
|
|
292
|
+
if (initialConfig) {
|
|
293
|
+
url.searchParams.set("initialConfig", JSON.stringify(initialConfig));
|
|
270
294
|
}
|
|
271
295
|
return url.toString();
|
|
272
296
|
}
|
|
@@ -407,13 +431,19 @@ function SheetPortal(_a) {
|
|
|
407
431
|
}
|
|
408
432
|
var SheetContent = React6.forwardRef((_a, ref) => {
|
|
409
433
|
var _b = _a, { className, children, style } = _b, props = __objRest(_b, ["className", "children", "style"]);
|
|
410
|
-
const { isExpanded, open, hasOpened } = useChatbot();
|
|
411
|
-
const width = isExpanded ? "848px" : "400px";
|
|
434
|
+
const { isExpanded, isFullScreen, open, hasOpened } = useChatbot();
|
|
435
|
+
const width = isFullScreen ? "100%" : isExpanded ? "848px" : "400px";
|
|
412
436
|
const translateX = open ? "0" : "100%";
|
|
413
437
|
const contentStyle = __spreadValues({
|
|
414
438
|
"--sheet-width": width,
|
|
415
439
|
transform: `translateX(${translateX})`
|
|
416
440
|
}, style);
|
|
441
|
+
const classNames = [
|
|
442
|
+
"chatbot-sheet-content",
|
|
443
|
+
isExpanded && !isFullScreen ? "chatbot-sheet-expanded" : "",
|
|
444
|
+
isFullScreen ? "chatbot-sheet-fullscreen" : "",
|
|
445
|
+
className || ""
|
|
446
|
+
].filter(Boolean).join(" ");
|
|
417
447
|
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
418
448
|
SheetPrimitive.Content,
|
|
419
449
|
__spreadProps(__spreadValues({
|
|
@@ -421,7 +451,7 @@ var SheetContent = React6.forwardRef((_a, ref) => {
|
|
|
421
451
|
"data-slot": "sheet-content",
|
|
422
452
|
forceMount: hasOpened || void 0,
|
|
423
453
|
onInteractOutside: (e) => e.preventDefault(),
|
|
424
|
-
className:
|
|
454
|
+
className: classNames,
|
|
425
455
|
style: contentStyle
|
|
426
456
|
}, props), {
|
|
427
457
|
children
|
package/dist/index.mjs
CHANGED
|
@@ -38,7 +38,8 @@ import React3 from "react";
|
|
|
38
38
|
import React from "react";
|
|
39
39
|
function useChatbotFrameHandler({
|
|
40
40
|
setOpen,
|
|
41
|
-
setIsExpanded
|
|
41
|
+
setIsExpanded,
|
|
42
|
+
setIsFullScreen
|
|
42
43
|
}) {
|
|
43
44
|
const [iframeEl, setIframeEl] = React.useState(
|
|
44
45
|
null
|
|
@@ -108,6 +109,12 @@ function useChatbotFrameHandler({
|
|
|
108
109
|
case "SHRINK_CHATBOT":
|
|
109
110
|
setIsExpanded(false);
|
|
110
111
|
break;
|
|
112
|
+
case "FULLSCREEN_CHATBOT":
|
|
113
|
+
setIsFullScreen(true);
|
|
114
|
+
break;
|
|
115
|
+
case "EXIT_FULLSCREEN_CHATBOT":
|
|
116
|
+
setIsFullScreen(false);
|
|
117
|
+
break;
|
|
111
118
|
case "RELOAD_CHATBOT":
|
|
112
119
|
iframe.src = iframe.src;
|
|
113
120
|
break;
|
|
@@ -139,12 +146,21 @@ function useChatbotWindowStates() {
|
|
|
139
146
|
const [hasOpened, setHasOpened] = React2.useState(false);
|
|
140
147
|
const [open, setOpen] = React2.useState(false);
|
|
141
148
|
const [isExpanded, setIsExpanded] = React2.useState(false);
|
|
149
|
+
const [isFullScreen, setIsFullScreen] = React2.useState(false);
|
|
142
150
|
React2.useEffect(() => {
|
|
143
151
|
if (open) {
|
|
144
152
|
setHasOpened(true);
|
|
145
153
|
}
|
|
146
154
|
}, [open]);
|
|
147
|
-
return {
|
|
155
|
+
return {
|
|
156
|
+
hasOpened,
|
|
157
|
+
open,
|
|
158
|
+
isExpanded,
|
|
159
|
+
isFullScreen,
|
|
160
|
+
setOpen,
|
|
161
|
+
setIsExpanded,
|
|
162
|
+
setIsFullScreen
|
|
163
|
+
};
|
|
148
164
|
}
|
|
149
165
|
|
|
150
166
|
// src/components/provider/chatbot-provider.tsx
|
|
@@ -160,7 +176,15 @@ function useChatbot() {
|
|
|
160
176
|
return context;
|
|
161
177
|
}
|
|
162
178
|
function ChatbotProvider({ children }) {
|
|
163
|
-
const {
|
|
179
|
+
const {
|
|
180
|
+
hasOpened,
|
|
181
|
+
open,
|
|
182
|
+
isExpanded,
|
|
183
|
+
isFullScreen,
|
|
184
|
+
setOpen,
|
|
185
|
+
setIsExpanded,
|
|
186
|
+
setIsFullScreen
|
|
187
|
+
} = useChatbotWindowStates();
|
|
164
188
|
const {
|
|
165
189
|
setMcps,
|
|
166
190
|
setAppName,
|
|
@@ -171,7 +195,8 @@ function ChatbotProvider({ children }) {
|
|
|
171
195
|
setIframeEl
|
|
172
196
|
} = useChatbotFrameHandler({
|
|
173
197
|
setOpen,
|
|
174
|
-
setIsExpanded
|
|
198
|
+
setIsExpanded,
|
|
199
|
+
setIsFullScreen
|
|
175
200
|
});
|
|
176
201
|
const value = {
|
|
177
202
|
hasOpened,
|
|
@@ -179,6 +204,8 @@ function ChatbotProvider({ children }) {
|
|
|
179
204
|
setOpen,
|
|
180
205
|
isExpanded,
|
|
181
206
|
setIsExpanded,
|
|
207
|
+
isFullScreen,
|
|
208
|
+
setIsFullScreen,
|
|
182
209
|
setSessionToken,
|
|
183
210
|
init,
|
|
184
211
|
setMcps,
|
|
@@ -199,9 +226,8 @@ var PROD_CHATBOT_URL = "https://agent.ec-force.com";
|
|
|
199
226
|
// src/components/chatbot-frame.tsx
|
|
200
227
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
201
228
|
function ChatbotFrame({
|
|
202
|
-
agentId,
|
|
203
229
|
appName,
|
|
204
|
-
|
|
230
|
+
initialConfig,
|
|
205
231
|
getSession,
|
|
206
232
|
enabled = true,
|
|
207
233
|
url,
|
|
@@ -247,8 +273,7 @@ function ChatbotFrame({
|
|
|
247
273
|
ref: setIframeEl,
|
|
248
274
|
src: buildIframeUrl({
|
|
249
275
|
baseUrl,
|
|
250
|
-
|
|
251
|
-
initialChatId
|
|
276
|
+
initialConfig
|
|
252
277
|
}),
|
|
253
278
|
className,
|
|
254
279
|
allow: "clipboard-write",
|
|
@@ -261,12 +286,11 @@ function ChatbotFrame({
|
|
|
261
286
|
}
|
|
262
287
|
function buildIframeUrl({
|
|
263
288
|
baseUrl,
|
|
264
|
-
|
|
265
|
-
initialChatId
|
|
289
|
+
initialConfig
|
|
266
290
|
}) {
|
|
267
|
-
const url = new URL(`/embed
|
|
268
|
-
if (
|
|
269
|
-
url.searchParams.set("
|
|
291
|
+
const url = new URL(`/embed`, baseUrl);
|
|
292
|
+
if (initialConfig) {
|
|
293
|
+
url.searchParams.set("initialConfig", JSON.stringify(initialConfig));
|
|
270
294
|
}
|
|
271
295
|
return url.toString();
|
|
272
296
|
}
|
|
@@ -407,13 +431,19 @@ function SheetPortal(_a) {
|
|
|
407
431
|
}
|
|
408
432
|
var SheetContent = React6.forwardRef((_a, ref) => {
|
|
409
433
|
var _b = _a, { className, children, style } = _b, props = __objRest(_b, ["className", "children", "style"]);
|
|
410
|
-
const { isExpanded, open, hasOpened } = useChatbot();
|
|
411
|
-
const width = isExpanded ? "848px" : "400px";
|
|
434
|
+
const { isExpanded, isFullScreen, open, hasOpened } = useChatbot();
|
|
435
|
+
const width = isFullScreen ? "100%" : isExpanded ? "848px" : "400px";
|
|
412
436
|
const translateX = open ? "0" : "100%";
|
|
413
437
|
const contentStyle = __spreadValues({
|
|
414
438
|
"--sheet-width": width,
|
|
415
439
|
transform: `translateX(${translateX})`
|
|
416
440
|
}, style);
|
|
441
|
+
const classNames = [
|
|
442
|
+
"chatbot-sheet-content",
|
|
443
|
+
isExpanded && !isFullScreen ? "chatbot-sheet-expanded" : "",
|
|
444
|
+
isFullScreen ? "chatbot-sheet-fullscreen" : "",
|
|
445
|
+
className || ""
|
|
446
|
+
].filter(Boolean).join(" ");
|
|
417
447
|
return /* @__PURE__ */ jsx4(SheetPortal, { forceMount: hasOpened || void 0, children: /* @__PURE__ */ jsx4(
|
|
418
448
|
SheetPrimitive.Content,
|
|
419
449
|
__spreadProps(__spreadValues({
|
|
@@ -421,7 +451,7 @@ var SheetContent = React6.forwardRef((_a, ref) => {
|
|
|
421
451
|
"data-slot": "sheet-content",
|
|
422
452
|
forceMount: hasOpened || void 0,
|
|
423
453
|
onInteractOutside: (e) => e.preventDefault(),
|
|
424
|
-
className:
|
|
454
|
+
className: classNames,
|
|
425
455
|
style: contentStyle
|
|
426
456
|
}, props), {
|
|
427
457
|
children
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
/* Sheet Content */
|
|
30
30
|
.chatbot-sheet-content {
|
|
31
31
|
position: fixed;
|
|
32
|
-
top:
|
|
32
|
+
top: 48px;
|
|
33
33
|
right: 0;
|
|
34
34
|
bottom: 0;
|
|
35
35
|
z-index: 50;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
40
40
|
border-left: 1px solid #e5e7eb;
|
|
41
41
|
width: var(--sheet-width, 400px);
|
|
42
|
-
height: 100vh;
|
|
42
|
+
height: calc(100vh - 48px);
|
|
43
43
|
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -47,6 +47,14 @@
|
|
|
47
47
|
--sheet-width: 848px;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
.chatbot-sheet-content.chatbot-sheet-fullscreen {
|
|
51
|
+
top: 0;
|
|
52
|
+
left: 0;
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100vh;
|
|
55
|
+
border-left: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
50
58
|
/* Sheet Header */
|
|
51
59
|
.chatbot-sheet-header {
|
|
52
60
|
display: flex;
|
package/package.json
CHANGED
|
@@ -4,10 +4,12 @@ import { useChatbot } from "./provider/chatbot-provider";
|
|
|
4
4
|
import type { MCP } from "./provider/use-chatbot-frame-handler";
|
|
5
5
|
|
|
6
6
|
export type ChatbotFrameProps = {
|
|
7
|
-
/** 管理画面上のエージェントID */
|
|
8
|
-
agentId: string;
|
|
9
7
|
/** 初期化時のチャットID */
|
|
10
|
-
|
|
8
|
+
initialConfig?: {
|
|
9
|
+
agentId?: string;
|
|
10
|
+
chatId?: string;
|
|
11
|
+
model?: string;
|
|
12
|
+
};
|
|
11
13
|
/** アプリ名のメタデータ */
|
|
12
14
|
appName?: string;
|
|
13
15
|
/** セッションを取得するための関数 */
|
|
@@ -32,9 +34,8 @@ export type ChatbotFrameProps = {
|
|
|
32
34
|
};
|
|
33
35
|
|
|
34
36
|
export function ChatbotFrame({
|
|
35
|
-
agentId,
|
|
36
37
|
appName,
|
|
37
|
-
|
|
38
|
+
initialConfig,
|
|
38
39
|
getSession,
|
|
39
40
|
enabled = true,
|
|
40
41
|
url,
|
|
@@ -94,8 +95,7 @@ export function ChatbotFrame({
|
|
|
94
95
|
ref={setIframeEl}
|
|
95
96
|
src={buildIframeUrl({
|
|
96
97
|
baseUrl,
|
|
97
|
-
|
|
98
|
-
initialChatId,
|
|
98
|
+
initialConfig,
|
|
99
99
|
})}
|
|
100
100
|
className={className}
|
|
101
101
|
allow="clipboard-write"
|
|
@@ -109,17 +109,19 @@ export function ChatbotFrame({
|
|
|
109
109
|
|
|
110
110
|
function buildIframeUrl({
|
|
111
111
|
baseUrl,
|
|
112
|
-
|
|
113
|
-
initialChatId,
|
|
112
|
+
initialConfig,
|
|
114
113
|
}: {
|
|
115
114
|
baseUrl: string;
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
initialConfig?: {
|
|
116
|
+
agentId?: string;
|
|
117
|
+
chatId?: string;
|
|
118
|
+
model?: string;
|
|
119
|
+
};
|
|
118
120
|
}) {
|
|
119
|
-
const url = new URL(`/embed
|
|
121
|
+
const url = new URL(`/embed`, baseUrl);
|
|
120
122
|
|
|
121
|
-
if (
|
|
122
|
-
url.searchParams.set("
|
|
123
|
+
if (initialConfig) {
|
|
124
|
+
url.searchParams.set("initialConfig", JSON.stringify(initialConfig));
|
|
123
125
|
}
|
|
124
126
|
|
|
125
127
|
return url.toString();
|
|
@@ -17,6 +17,10 @@ type ChatbotContextType = {
|
|
|
17
17
|
isExpanded: boolean;
|
|
18
18
|
/** チャットボットを展開する */
|
|
19
19
|
setIsExpanded: (expanded: boolean) => void;
|
|
20
|
+
/** チャットボットをフルスクリーンにしているか */
|
|
21
|
+
isFullScreen: boolean;
|
|
22
|
+
/** チャットボットをフルスクリーンにする */
|
|
23
|
+
setIsFullScreen: (fullScreen: boolean) => void;
|
|
20
24
|
/** チャットボットを初期化 */
|
|
21
25
|
init: (props: InitProps) => void;
|
|
22
26
|
/** MCPを設定 */
|
|
@@ -53,8 +57,15 @@ type ChatbotProviderProps = {
|
|
|
53
57
|
};
|
|
54
58
|
|
|
55
59
|
export function ChatbotProvider({ children }: ChatbotProviderProps) {
|
|
56
|
-
const {
|
|
57
|
-
|
|
60
|
+
const {
|
|
61
|
+
hasOpened,
|
|
62
|
+
open,
|
|
63
|
+
isExpanded,
|
|
64
|
+
isFullScreen,
|
|
65
|
+
setOpen,
|
|
66
|
+
setIsExpanded,
|
|
67
|
+
setIsFullScreen,
|
|
68
|
+
} = useChatbotWindowStates();
|
|
58
69
|
const {
|
|
59
70
|
setMcps,
|
|
60
71
|
setAppName,
|
|
@@ -66,6 +77,7 @@ export function ChatbotProvider({ children }: ChatbotProviderProps) {
|
|
|
66
77
|
} = useChatbotFrameHandler({
|
|
67
78
|
setOpen,
|
|
68
79
|
setIsExpanded,
|
|
80
|
+
setIsFullScreen,
|
|
69
81
|
});
|
|
70
82
|
|
|
71
83
|
const value = {
|
|
@@ -74,6 +86,8 @@ export function ChatbotProvider({ children }: ChatbotProviderProps) {
|
|
|
74
86
|
setOpen,
|
|
75
87
|
isExpanded,
|
|
76
88
|
setIsExpanded,
|
|
89
|
+
isFullScreen,
|
|
90
|
+
setIsFullScreen,
|
|
77
91
|
setSessionToken,
|
|
78
92
|
init,
|
|
79
93
|
setMcps,
|
|
@@ -6,6 +6,8 @@ export type IframeMessage =
|
|
|
6
6
|
| { type: "CLOSE_CHATBOT" }
|
|
7
7
|
| { type: "EXPAND_CHATBOT" }
|
|
8
8
|
| { type: "SHRINK_CHATBOT" }
|
|
9
|
+
| { type: "FULLSCREEN_CHATBOT" }
|
|
10
|
+
| { type: "EXIT_FULLSCREEN_CHATBOT" }
|
|
9
11
|
| { type: "RELOAD_CHATBOT" };
|
|
10
12
|
|
|
11
13
|
export type MCP = {
|
|
@@ -43,9 +45,11 @@ export type ParentMessage =
|
|
|
43
45
|
export function useChatbotFrameHandler({
|
|
44
46
|
setOpen,
|
|
45
47
|
setIsExpanded,
|
|
48
|
+
setIsFullScreen,
|
|
46
49
|
}: {
|
|
47
50
|
setOpen: (open: boolean) => void;
|
|
48
51
|
setIsExpanded: (expanded: boolean) => void;
|
|
52
|
+
setIsFullScreen: (fullScreen: boolean) => void;
|
|
49
53
|
}) {
|
|
50
54
|
const [iframeEl, setIframeEl] = React.useState<HTMLIFrameElement | null>(
|
|
51
55
|
null,
|
|
@@ -125,6 +129,12 @@ export function useChatbotFrameHandler({
|
|
|
125
129
|
case "SHRINK_CHATBOT":
|
|
126
130
|
setIsExpanded(false);
|
|
127
131
|
break;
|
|
132
|
+
case "FULLSCREEN_CHATBOT":
|
|
133
|
+
setIsFullScreen(true);
|
|
134
|
+
break;
|
|
135
|
+
case "EXIT_FULLSCREEN_CHATBOT":
|
|
136
|
+
setIsFullScreen(false);
|
|
137
|
+
break;
|
|
128
138
|
case "RELOAD_CHATBOT":
|
|
129
139
|
// reload iframe
|
|
130
140
|
iframe.src = iframe.src;
|
|
@@ -4,6 +4,7 @@ export function useChatbotWindowStates() {
|
|
|
4
4
|
const [hasOpened, setHasOpened] = React.useState(false);
|
|
5
5
|
const [open, setOpen] = React.useState(false);
|
|
6
6
|
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
7
|
+
const [isFullScreen, setIsFullScreen] = React.useState(false);
|
|
7
8
|
|
|
8
9
|
React.useEffect(() => {
|
|
9
10
|
if (open) {
|
|
@@ -11,5 +12,13 @@ export function useChatbotWindowStates() {
|
|
|
11
12
|
}
|
|
12
13
|
}, [open]);
|
|
13
14
|
|
|
14
|
-
return {
|
|
15
|
+
return {
|
|
16
|
+
hasOpened,
|
|
17
|
+
open,
|
|
18
|
+
isExpanded,
|
|
19
|
+
isFullScreen,
|
|
20
|
+
setOpen,
|
|
21
|
+
setIsExpanded,
|
|
22
|
+
setIsFullScreen,
|
|
23
|
+
};
|
|
15
24
|
}
|
package/src/components/sheet.tsx
CHANGED
|
@@ -51,8 +51,8 @@ const SheetContent = React.forwardRef<
|
|
|
51
51
|
React.ElementRef<typeof SheetPrimitive.Content>,
|
|
52
52
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>
|
|
53
53
|
>(({ className, children, style, ...props }, ref) => {
|
|
54
|
-
const { isExpanded, open, hasOpened } = useChatbot();
|
|
55
|
-
const width = isExpanded ? "848px" : "400px";
|
|
54
|
+
const { isExpanded, isFullScreen, open, hasOpened } = useChatbot();
|
|
55
|
+
const width = isFullScreen ? "100%" : isExpanded ? "848px" : "400px";
|
|
56
56
|
|
|
57
57
|
// Use transform for better performance instead of right property
|
|
58
58
|
const translateX = open ? "0" : "100%";
|
|
@@ -64,6 +64,15 @@ const SheetContent = React.forwardRef<
|
|
|
64
64
|
...style,
|
|
65
65
|
} as React.CSSProperties & { "--sheet-width": string };
|
|
66
66
|
|
|
67
|
+
const classNames = [
|
|
68
|
+
"chatbot-sheet-content",
|
|
69
|
+
isExpanded && !isFullScreen ? "chatbot-sheet-expanded" : "",
|
|
70
|
+
isFullScreen ? "chatbot-sheet-fullscreen" : "",
|
|
71
|
+
className || "",
|
|
72
|
+
]
|
|
73
|
+
.filter(Boolean)
|
|
74
|
+
.join(" ");
|
|
75
|
+
|
|
67
76
|
return (
|
|
68
77
|
<SheetPortal forceMount={hasOpened || undefined}>
|
|
69
78
|
<SheetPrimitive.Content
|
|
@@ -71,7 +80,7 @@ const SheetContent = React.forwardRef<
|
|
|
71
80
|
data-slot="sheet-content"
|
|
72
81
|
forceMount={hasOpened || undefined}
|
|
73
82
|
onInteractOutside={(e) => e.preventDefault()}
|
|
74
|
-
className={
|
|
83
|
+
className={classNames}
|
|
75
84
|
style={contentStyle}
|
|
76
85
|
{...props}
|
|
77
86
|
>
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
/* Sheet Content */
|
|
30
30
|
.chatbot-sheet-content {
|
|
31
31
|
position: fixed;
|
|
32
|
-
top:
|
|
32
|
+
top: 48px;
|
|
33
33
|
right: 0;
|
|
34
34
|
bottom: 0;
|
|
35
35
|
z-index: 50;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
40
40
|
border-left: 1px solid #e5e7eb;
|
|
41
41
|
width: var(--sheet-width, 400px);
|
|
42
|
-
height: 100vh;
|
|
42
|
+
height: calc(100vh - 48px);
|
|
43
43
|
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -47,6 +47,14 @@
|
|
|
47
47
|
--sheet-width: 848px;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
.chatbot-sheet-content.chatbot-sheet-fullscreen {
|
|
51
|
+
top: 0;
|
|
52
|
+
left: 0;
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100vh;
|
|
55
|
+
border-left: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
50
58
|
/* Sheet Header */
|
|
51
59
|
.chatbot-sheet-header {
|
|
52
60
|
display: flex;
|