{"html":"

\n AI Assistant\n

\n GPT-4\n Pro\n

\n\n

\n \n

\n\n

\n \n \n \n \n

Upload files

\n \n\n \n \n \n \n

Web link

\n \n\n \n \n \n \n

Code repo

\n \n\n \n \n

Design file

\n \n

\n\n \n \n \n \n

Voice input

\n \n

\n\n

\n 0/2000\n

\n\n \n

\n\n

\n","css":".ai-chat-input {\n width: 100%;\n max-width: 500px;\n margin: 0 auto;\n padding: 1.5em;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.chat-container {\n position: relative;\n display: flex;\n flex-direction: column;\n border-radius: 1.25em;\n background: linear-gradient(\n 135deg,\n rgba(39, 39, 42, 0.8),\n rgba(9, 9, 11, 0.9)\n );\n border: 1px solid rgba(113, 113, 122, 0.5);\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n backdrop-filter: blur(20px);\n overflow: hidden;\n}\n\n.chat-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1em 1.5em 0.5em;\n}\n\n.status-section {\n display: flex;\n align-items: center;\n gap: 0.375em;\n}\n\n.status-indicator {\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n background-color: #22c55e;\n animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.status-text {\n font-size: 0.75em;\n font-weight: 500;\n color: #a1a1aa;\n}\n\n.badges {\n display: flex;\n align-items: center;\n gap: 0.5em;\n}\n\n.badge {\n padding: 0.25em 0.5em;\n font-size: 0.75em;\n font-weight: 500;\n border-radius: 1em;\n}\n\n.badge-gpt {\n background-color: rgba(39, 39, 42, 0.6);\n color: #d4d4d8;\n}\n\n.badge-pro {\n background-color: rgba(59, 130, 246, 0.1);\n color: #60a5fa;\n border: 1px solid rgba(59, 130, 246, 0.2);\n}\n\n.input-section {\n position: relative;\n overflow: hidden;\n}\n\n.main-input {\n width: 100%;\n padding: 1em 1.5em;\n background: transparent;\n border: none;\n outline: none;\n resize: none;\n font-size: 1em;\n font-weight: normal;\n line-height: 1.6;\n min-height: 7.5em;\n color: #f4f4f5;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.main-input::-webkit-scrollbar {\n display: none;\n}\n\n.main-input::placeholder {\n color: #71717a;\n}\n\n.gradient-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(39, 39, 42, 0.05), transparent);\n pointer-events: none;\n}\n\n.controls-section {\n padding: 0 1em 1em;\n}\n\n.controls-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.left-controls {\n display: flex;\n align-items: center;\n gap: 0.5em;\n}\n\n.attachment-group {\n display: flex;\n align-items: center;\n gap: 0.375em;\n padding: 0.25em;\n background-color: rgba(39, 39, 42, 0.4);\n border-radius: 0.75em;\n border: 1px solid rgba(63, 63, 70, 0.5);\n}\n\n.control-btn {\n position: relative;\n padding: 0.625em;\n background: transparent;\n border: none;\n border-radius: 0.5em;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #71717a;\n}\n\n.control-btn:hover {\n color: #d4d4d8;\n background-color: rgba(63, 63, 70, 0.5);\n}\n\n.control-btn:hover .btn-icon {\n transform: scale(1.1);\n}\n\n.link-btn:hover {\n color: #60a5fa;\n background-color: rgba(59, 130, 246, 0.1);\n}\n\n.code-btn:hover {\n color: #4ade80;\n background-color: rgba(34, 197, 94, 0.1);\n}\n\n.design-btn:hover {\n color: #a78bfa;\n background-color: rgba(147, 51, 234, 0.1);\n}\n\n.voice-btn {\n border: 1px solid rgba(63, 63, 70, 0.3);\n}\n\n.voice-btn:hover {\n color: #f87171;\n background-color: rgba(239, 68, 68, 0.1);\n}\n\n.btn-icon {\n width: 1em;\n height: 1em;\n transition: transform 0.2s ease;\n}\n\n.tooltip {\n position: absolute;\n top: -2em;\n left: 50%;\n transform: translateX(-50%);\n padding: 0.5em;\n background-color: #27272a;\n color: #d4d4d8;\n font-size: 0.75em;\n border-radius: 0.25em;\n white-space: nowrap;\n opacity: 0;\n transition: opacity 0.2s ease;\n pointer-events: none;\n}\n\n.control-btn:hover .tooltip {\n opacity: 1;\n}\n\n.right-controls {\n display: flex;\n align-items: center;\n gap: 0.75em;\n}\n\n.counter {\n font-size: 0.75em;\n font-weight: 500;\n color: #71717a;\n}\n\n.counter-max {\n color: #a1a1aa;\n}\n\n.send-btn {\n position: relative;\n padding: 0.75em;\n background: linear-gradient(to right, #2563eb, #3b82f6);\n border: none;\n border-radius: 0.75em;\n cursor: pointer;\n transition: all 0.2s ease;\n color: white;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.send-btn:hover {\n background: linear-gradient(to right, #3b82f6, #60a5fa);\n transform: scale(1.05);\n box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.25);\n}\n\n.send-btn:hover .send-icon {\n transform: translateY(-0.125em) translateX(0.125em);\n}\n\n.send-icon {\n width: 1.25em;\n height: 1.25em;\n transition: transform 0.2s ease;\n}\n\n.footer-info {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 0.75em;\n padding-top: 0.75em;\n border-top: 1px solid rgba(39, 39, 42, 0.5);\n font-size: 0.75em;\n color: #71717a;\n}\n\n.shortcut-info {\n display: flex;\n align-items: center;\n gap: 0.5em;\n}\n\n.info-icon {\n width: 0.75em;\n height: 0.75em;\n}\n\n.shortcut-key {\n padding: 0.375em 0.375em;\n background-color: #27272a;\n border: 1px solid #3f3f46;\n border-radius: 0.25em;\n color: #a1a1aa;\n font-family: monospace;\n font-size: 0.75em;\n box-shadow:\n 0 1px 3px rgba(0, 0, 0, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}\n\n.system-status {\n display: flex;\n align-items: center;\n gap: 0.25em;\n}\n\n.system-indicator {\n width: 0.375em;\n height: 0.375em;\n background-color: #22c55e;\n border-radius: 50%;\n}\n\n.floating-overlay {\n position: absolute;\n inset: 0;\n border-radius: 1.25em;\n background: linear-gradient(\n 135deg,\n rgba(59, 130, 246, 0.05),\n transparent,\n rgba(147, 51, 234, 0.05)\n );\n pointer-events: none;\n}\n"}

selfish-wombat-68

👁 实时预览

📝 源代码