ChatGPT App 显示模式参考

Source: Dev.to

Inline

内联显示模式会把你的资源插入对话的流中。你的应用 iframe 被放置在如下的 <div> 中：

<div>
    <!-- app iframe goes here -->
</div>

外层 <div> 的高度固定为你的资源高度，资源可以任意高（已测试至 20 kpx）。在我的所有测试中，window.openai.maxHeight 全局变量（即 useMaxHeight hook）未定义，且在此模式下似乎未被使用。

Fullscreen

全屏显示模式占据 ChatGPT 头部/导航下方的整个对话空间。导航栏会转换为居中的应用标题，左侧有一个 X 按钮用于退出全屏。你的应用 iframe 被插入如下的 <div>：

<div class="fullscreen-container">
    <!-- app iframe goes here -->
</div>

与内联模式一样，资源可以任意高（已测试至 20 kpx）。window.openai.maxHeight 全局变量在此模式下同样未定义。

Picture‑in‑Picture (PiP)

PiP 显示模式会将你的资源绝对定位，置于对话之上。iframe 被放置在如下的 <div> 中：

<div class="pip-container">
    <!-- app iframe goes here -->
</div>

这是唯一使用 window.openai.maxHeight 全局变量（或 useMaxHeight hook）的显示模式。你的 iframe 可以请求任意高度，但内容会在超出 maxHeight 设置后出现滚动，且 PiP 窗口不会超过该限制。

注意： PiP 在移动端屏幕宽度下不受支持；在此类设备上会回退到全屏模式。

Wrapping Up

实际上，每种显示模式的行为都像是不同的客户端，因此你的应用必须相应地进行处理。好消息是，仅需要实现内联模式，这简化了开发工作。

• 想要交互式查看每种显示模式的效果，请访问 sunpeak ChatGPT 模拟器。
• 想要开始使用 Sunpeak 框架构建 ChatGPT 应用，请参阅 Sunpeak 文档。
• 如果你觉得本文有帮助，请 在 GitHub 上给我们加星。