mirror of
https://github.com/discourse/discourse-ai.git
synced 2025-03-09 11:48:47 +00:00
0d7f353284
This is a significant PR that introduces AI Artifacts functionality to the discourse-ai plugin along with several other improvements. Here are the key changes: 1. AI Artifacts System: - Adds a new `AiArtifact` model and database migration - Allows creation of web artifacts with HTML, CSS, and JavaScript content - Introduces security settings (`strict`, `lax`, `disabled`) for controlling artifact execution - Implements artifact rendering in iframes with sandbox protection - New `CreateArtifact` tool for AI to generate interactive content 2. Tool System Improvements: - Adds support for partial tool calls, allowing incremental updates during generation - Better handling of tool call states and progress tracking - Improved XML tool processing with CDATA support - Fixes for tool parameter handling and duplicate invocations 3. LLM Provider Updates: - Updates for Anthropic Claude models with correct token limits - Adds support for native/XML tool modes in Gemini integration - Adds new model configurations including Llama 3.1 models - Improvements to streaming response handling 4. UI Enhancements: - New artifact viewer component with expand/collapse functionality - Security controls for artifact execution (click-to-run in strict mode) - Improved dialog and response handling - Better error management for tool execution 5. Security Improvements: - Sandbox controls for artifact execution - Public/private artifact sharing controls - Security settings to control artifact behavior - CSP and frame-options handling for artifacts 6. Technical Improvements: - Better post streaming implementation - Improved error handling in completions - Better memory management for partial tool calls - Enhanced testing coverage 7. Configuration: - New site settings for artifact security - Extended LLM model configurations - Additional tool configuration options This PR significantly enhances the plugin's capabilities for generating and displaying interactive content while maintaining security and providing flexible configuration options for administrators.
107 lines
1.8 KiB
SCSS
107 lines
1.8 KiB
SCSS
.ai-artifact__wrapper {
|
|
iframe {
|
|
width: 100%;
|
|
height: calc(100% - 2em);
|
|
}
|
|
height: 500px;
|
|
padding-bottom: 2em;
|
|
}
|
|
|
|
.ai-artifact__click-to-run {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.ai-artifact__panel {
|
|
display: none;
|
|
}
|
|
|
|
html.ai-artifact-expanded {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ai-artifact__footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.ai-artifact__expand-button {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.ai-artifact__expanded {
|
|
.ai-artifact__footer {
|
|
display: none;
|
|
}
|
|
|
|
.ai-artifact__panel--wrapper {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4em;
|
|
z-index: 1000000;
|
|
&:hover {
|
|
.ai-artifact__panel {
|
|
transform: translateY(0) !important;
|
|
animation: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ai-artifact__panel {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2em;
|
|
transition: transform 0.5s ease-in-out;
|
|
animation: slideUp 0.5s 3s forwards;
|
|
background-color: var(--secondary-low);
|
|
opacity: 0.9;
|
|
transform: translateY(0);
|
|
button {
|
|
width: 100%;
|
|
text-align: left;
|
|
box-sizing: border-box;
|
|
justify-content: flex-start;
|
|
color: var(--secondary-very-high);
|
|
&:hover {
|
|
color: var(--secondary-very-high);
|
|
.d-icon {
|
|
color: var(--secondary-high);
|
|
}
|
|
//color: var(--secondary-vary-low);
|
|
}
|
|
}
|
|
}
|
|
@keyframes slideUp {
|
|
to {
|
|
transform: translateY(-100%);
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
position: fixed;
|
|
top: 0;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: z("fullscreen");
|
|
}
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: z("fullscreen");
|
|
background-color: var(--secondary);
|
|
}
|