create-mcp-use-app 2.0.0-beta.12 → 2.0.0-beta.13
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.
|
@@ -31,23 +31,6 @@ export function PipIcon() {
|
|
|
31
31
|
);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
export function CloseIcon() {
|
|
35
|
-
return (
|
|
36
|
-
<svg
|
|
37
|
-
width="14"
|
|
38
|
-
height="14"
|
|
39
|
-
viewBox="0 0 24 24"
|
|
40
|
-
fill="none"
|
|
41
|
-
stroke="currentColor"
|
|
42
|
-
strokeWidth="2"
|
|
43
|
-
aria-hidden
|
|
44
|
-
>
|
|
45
|
-
<line x1="18" y1="6" x2="6" y2="18" />
|
|
46
|
-
<line x1="6" y1="6" x2="18" y2="18" />
|
|
47
|
-
</svg>
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
|
|
51
34
|
export function SunIcon() {
|
|
52
35
|
return (
|
|
53
36
|
<svg
|
|
@@ -16,7 +16,6 @@ import { useState } from "react";
|
|
|
16
16
|
import { z } from "zod";
|
|
17
17
|
|
|
18
18
|
import {
|
|
19
|
-
CloseIcon,
|
|
20
19
|
ExpandIcon,
|
|
21
20
|
ExternalLinkIcon,
|
|
22
21
|
MonitorIcon,
|
|
@@ -124,65 +123,47 @@ export default function McpApp() {
|
|
|
124
123
|
</span>
|
|
125
124
|
</Tooltip>
|
|
126
125
|
</div>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
126
|
+
{!isPip && (
|
|
127
|
+
<div className="flex items-center gap-2">
|
|
128
|
+
{availableDisplayModes.includes("pip") && (
|
|
129
|
+
<Tooltip
|
|
130
|
+
label="MCP Apps display mode: picture-in-picture"
|
|
131
|
+
multiline
|
|
132
|
+
>
|
|
133
|
+
<button
|
|
134
|
+
type="button"
|
|
135
|
+
className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
|
|
136
|
+
aria-label="Picture-in-picture"
|
|
137
|
+
onClick={() => void requestDisplayMode({ mode: "pip" })}
|
|
134
138
|
>
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
multiline
|
|
139
|
+
<PipIcon />
|
|
140
|
+
</button>
|
|
141
|
+
</Tooltip>
|
|
142
|
+
)}
|
|
143
|
+
{availableDisplayModes.includes("fullscreen") && (
|
|
144
|
+
<Tooltip label="MCP Apps display mode: fullscreen" multiline>
|
|
145
|
+
<button
|
|
146
|
+
type="button"
|
|
147
|
+
className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
|
|
148
|
+
aria-label="Fullscreen"
|
|
149
|
+
onClick={() =>
|
|
150
|
+
void requestDisplayMode({ mode: "fullscreen" })
|
|
151
|
+
}
|
|
149
152
|
>
|
|
150
|
-
<
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
>
|
|
158
|
-
<ExpandIcon />
|
|
159
|
-
</button>
|
|
160
|
-
</Tooltip>
|
|
161
|
-
)}
|
|
162
|
-
</>
|
|
163
|
-
)}
|
|
164
|
-
{(isFullscreen || isPip) && (
|
|
165
|
-
<Tooltip
|
|
166
|
-
label="MCP Apps display mode: return to inline"
|
|
167
|
-
multiline
|
|
168
|
-
>
|
|
169
|
-
<button
|
|
170
|
-
type="button"
|
|
171
|
-
className="cursor-pointer rounded-full border border-neutral-300 p-2 text-neutral-900 transition-colors hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-100 dark:hover:bg-neutral-800"
|
|
172
|
-
aria-label="Exit"
|
|
173
|
-
onClick={() => void requestDisplayMode({ mode: "inline" })}
|
|
174
|
-
>
|
|
175
|
-
<CloseIcon />
|
|
176
|
-
</button>
|
|
177
|
-
</Tooltip>
|
|
178
|
-
)}
|
|
179
|
-
</div>
|
|
153
|
+
<ExpandIcon />
|
|
154
|
+
</button>
|
|
155
|
+
</Tooltip>
|
|
156
|
+
)}
|
|
157
|
+
</div>
|
|
158
|
+
)}
|
|
180
159
|
</div>
|
|
181
160
|
)}
|
|
182
161
|
{!isMobile && (
|
|
183
162
|
<button
|
|
184
163
|
type="button"
|
|
185
|
-
className=
|
|
164
|
+
className={`absolute left-1/2 z-20 flex -translate-x-1/2 cursor-pointer flex-col items-center gap-1 border-0 bg-transparent p-0 text-neutral-900 transition-opacity hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50 ${
|
|
165
|
+
isFullscreen ? "top-6" : "bottom-6"
|
|
166
|
+
}`}
|
|
186
167
|
disabled={!canOpenExternal}
|
|
187
168
|
title="mcp-use on GitHub"
|
|
188
169
|
onClick={() =>
|
|
@@ -202,7 +183,7 @@ export default function McpApp() {
|
|
|
202
183
|
<div
|
|
203
184
|
className={`relative z-10 flex flex-col items-center text-center ${
|
|
204
185
|
isFullscreen
|
|
205
|
-
? "min-h-0 flex-1 justify-center overflow-y-auto px-6
|
|
186
|
+
? "min-h-0 flex-1 justify-center overflow-y-auto px-6 pt-24 pb-8"
|
|
206
187
|
: isMobile
|
|
207
188
|
? "px-6 py-10"
|
|
208
189
|
: "min-h-[400px] px-8 py-8 pb-16 sm:min-h-[440px] sm:px-10 sm:py-10 sm:pb-16"
|