mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-04-07 00:15:23 +02:00
771227ecf9
* refactor: Code Editor and Auto Scroll Functionality - Added a useEffect hook in CodeEditor to sync streaming content with Sandpack without remounting the provider, improving performance and user experience. - Updated useAutoScroll to accept an optional editorRef, allowing for dynamic scroll container selection based on the editor's state. - Refactored ArtifactTabs to utilize the new editorRef in the useAutoScroll hook, ensuring consistent scrolling behavior during content updates. - Introduced stableFiles and mergedFiles logic in CodeEditor to optimize file handling and prevent unnecessary updates during streaming content changes. * refactor: Update CodeEditor to Sync Streaming Content Based on Read-Only State - Modified the useEffect hook in CodeEditor to conditionally sync streaming content with Sandpack only when in read-only mode, preventing unnecessary updates during user edits. - Enhanced the dependency array of the useEffect hook to include the readOnly state, ensuring accurate synchronization behavior. * refactor: Monaco Editor for Artifact Code Editing * refactor: Clean up ArtifactCodeEditor and ArtifactTabs components - Removed unused scrollbar styles from mobile.css to streamline the code. - Refactored ArtifactCodeEditor to improve content synchronization and read-only state handling. - Enhanced ArtifactTabs by removing unnecessary context usage and optimizing component structure for better readability. * feat: Add support for new artifact type 'application/vnd.ant.react' - Introduced handling for 'application/vnd.ant.react' in artifactFilename, artifactTemplate, and dependenciesMap. - Updated relevant mappings to ensure proper integration of the new artifact type within the application. * refactor:ArtifactCodeEditor with Monaco Editor Configuration - Added support for disabling validation in the Monaco Editor to improve the artifact viewer/editor experience. - Introduced a new type definition for Monaco to enhance type safety. - Updated the handling of the 'application/vnd.ant.react' artifact type to ensure proper integration with the editor. * refactor: Clean up ArtifactCodeEditor and mobile.css - Removed unnecessary whitespace in mobile.css for cleaner code. - Refactored ArtifactCodeEditor to streamline language mapping and type handling, enhancing readability and maintainability. - Consolidated language and type mappings into dedicated constants for improved clarity and efficiency. * feat: Integrate Monaco Editor for Enhanced Code Editing Experience - Added the Monaco Editor as a dependency to improve the code editing capabilities within the ArtifactCodeEditor component. - Refactored the handling of TypeScript and JavaScript defaults in the Monaco Editor configuration for better type safety and clarity. - Streamlined the setup for disabling validation, enhancing the artifact viewer/editor experience. * fix: Update ArtifactCodeEditor to handle null content checks - Modified conditional checks in ArtifactCodeEditor to use `art.content != null` instead of `art.content` for improved null safety. - Ensured consistent handling of artifact content across various useEffect hooks to prevent potential errors when content is null. * fix: Refine content comparison logic in ArtifactCodeEditor - Updated the condition for checking if the code is not original by removing the redundant null check for `art.content`, ensuring more concise and clear logic. - This change enhances the readability of the code and maintains the integrity of content comparison within the editor. * fix: Simplify code comparison logic in ArtifactCodeEditor - Removed redundant null check for the `code` variable, ensuring a more straightforward comparison with the current update reference. - This change improves code clarity and maintains the integrity of the content comparison logic within the editor.
364 lines
No EOL
6.8 KiB
CSS
364 lines
No EOL
6.8 KiB
CSS
.hover-button.active {
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
|
|
.nav-close-button {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.nav {
|
|
position: fixed;
|
|
z-index: 110;
|
|
top: 0;
|
|
|
|
/* max-width: 260px; */
|
|
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.nav.active {
|
|
position: relative;
|
|
left: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.nav-mask.active {
|
|
opacity: 0;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.nav {
|
|
width: calc(100% - 10px) ;
|
|
transition: all 0.15s;
|
|
}
|
|
.nav-mask {
|
|
position: fixed;
|
|
z-index: 105;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: rgba(7, 7, 7, 0.4);
|
|
padding-left: 420px;
|
|
padding-top: 12px;
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nav-open-button {
|
|
opacity: 0;
|
|
}
|
|
|
|
.nav-mask.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.nav.active {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.switch-container {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
.switch-result {
|
|
display: block !important;
|
|
visibility: visible;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
/* .sibling-switch {
|
|
left: 114px;
|
|
top: unset;
|
|
bottom: 4px;
|
|
visibility: visible;
|
|
z-index: 2;
|
|
} */
|
|
.sibling-switch {
|
|
display: none;
|
|
}
|
|
|
|
.hover-button {
|
|
display: block;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.input-panel-button {
|
|
border: 0;
|
|
}
|
|
|
|
.input-panel-button svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.input-panel {
|
|
}
|
|
|
|
.nav-open-button
|
|
{
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
.hide-scrollbar {
|
|
/* Hide scrollbar for Chrome, Safari, and Opera */
|
|
scrollbar-width: none; /* For Firefox */
|
|
-ms-overflow-style: none; /* For Internet Explorer and Edge */
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none; /* For WebKit browsers */
|
|
}
|
|
|
|
.gemini-gradient {
|
|
/* Adjust the colors and positioning as necessary to match the image */
|
|
background-image: radial-gradient(circle at center, #0000ff, #87cefa, #ffffff);
|
|
/* More styling for demonstration purposes */
|
|
border-radius: 50%;
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sidenav {
|
|
/* width: calc(100% - 10px) ; */
|
|
transition: all 0.15s;
|
|
position: fixed;
|
|
z-index: 66;
|
|
top: 0;
|
|
max-width: 320px;
|
|
|
|
/* max-width: 260px; */
|
|
|
|
bottom: 0;
|
|
right: 0
|
|
/* opacity: 0; */
|
|
}
|
|
.sidenav-mask {
|
|
position: fixed;
|
|
z-index: 65;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-color: rgba(7, 7, 7, 0.4);
|
|
padding-left: 420px;
|
|
padding-top: 12px;
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidenav-mask.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.sidenav.active {
|
|
position: fixed;
|
|
}
|
|
}
|
|
|
|
@keyframes tuning {
|
|
0% { transform: rotate(30deg); }
|
|
25% { transform: rotate(110deg); }
|
|
50% { transform: rotate(-40deg); }
|
|
75% { transform: rotate(80deg) }
|
|
100% { transform: rotate(30deg) }
|
|
}
|
|
|
|
.rotate {
|
|
animation: tuning 2.1s 1;
|
|
}
|
|
|
|
@-webkit-keyframes slideUpAndFade {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateY(2px);
|
|
transform:translateY(2px)
|
|
}
|
|
to {
|
|
opacity:1;
|
|
-webkit-transform:translateY(0);
|
|
transform:translateY(0)
|
|
}
|
|
}
|
|
@keyframes slideUpAndFade {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateY(2px);
|
|
transform:translateY(2px)
|
|
}
|
|
to {
|
|
opacity:1;
|
|
-webkit-transform:translateY(0);
|
|
transform:translateY(0)
|
|
}
|
|
}
|
|
.radix-side-bottom\:animate-slideUpAndFade[data-side=bottom] {
|
|
-webkit-animation:slideUpAndFade .4s cubic-bezier(.16,1,.3,1);
|
|
animation:slideUpAndFade .4s cubic-bezier(.16,1,.3,1)
|
|
}
|
|
@-webkit-keyframes slideRightAndFade {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateX(-2px);
|
|
transform:translateX(-2px)
|
|
}
|
|
to {
|
|
opacity:1;
|
|
-webkit-transform:translateX(0);
|
|
transform:translateX(0)
|
|
}
|
|
}
|
|
@keyframes slideRightAndFade {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateX(-2px);
|
|
transform:translateX(-2px)
|
|
}
|
|
to {
|
|
opacity:1;
|
|
-webkit-transform:translateX(0);
|
|
transform:translateX(0)
|
|
}
|
|
}
|
|
.radix-side-left\:animate-slideRightAndFade[data-side=left] {
|
|
-webkit-animation:slideRightAndFade .4s cubic-bezier(.16,1,.3,1);
|
|
animation:slideRightAndFade .4s cubic-bezier(.16,1,.3,1)
|
|
}
|
|
@keyframes slideLeftAndFade {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateX(2px);
|
|
transform:translateX(2px)
|
|
}
|
|
to {
|
|
opacity:1;
|
|
-webkit-transform:translateX(0);
|
|
transform:translateX(0)
|
|
}
|
|
}
|
|
.radix-side-right\:animate-slideLeftAndFade[data-side=right] {
|
|
-webkit-animation:slideLeftAndFade .4s cubic-bezier(.16,1,.3,1);
|
|
animation:slideLeftAndFade .4s cubic-bezier(.16,1,.3,1)
|
|
}
|
|
@keyframes slideDownAndFade {
|
|
0% {
|
|
opacity:0;
|
|
-webkit-transform:translateY(-2px);
|
|
transform:translateY(-2px)
|
|
}
|
|
to {
|
|
opacity:1;
|
|
-webkit-transform:translateY(0);
|
|
transform:translateY(0)
|
|
}
|
|
}
|
|
.radix-side-top\:animate-slideDownAndFade[data-side=top] {
|
|
-webkit-animation:slideDownAndFade .4s cubic-bezier(.16,1,.3,1);
|
|
animation:slideDownAndFade .4s cubic-bezier(.16,1,.3,1)
|
|
}
|
|
|
|
.azure-bg-color {
|
|
background: linear-gradient(0.375turn, #61bde2, #4389d0);
|
|
}
|
|
|
|
@keyframes slowPulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.slow-pulse {
|
|
animation: slowPulse 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.scrollbar-gutter-stable {
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
/* Styles for Chrome scrollbar */
|
|
.chrome-scrollbar::-webkit-scrollbar {
|
|
width: 12px; /* Increase the width of the scrollbar */
|
|
}
|
|
|
|
.chrome-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, 0.2); /* Color of the scroll thumb */
|
|
border-radius: 6px; /* Rounded corners on the scroll thumb */
|
|
border: 2px solid transparent; /* Creates padding around scroll thumb */
|
|
background-clip: padding-box; /* Prevents background color from leaking outside the border */
|
|
}
|
|
|
|
.chrome-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(0, 0, 0, 0.3); /* Darker color when hovering */
|
|
}
|
|
|
|
.chrome-scrollbar::-webkit-scrollbar-track {
|
|
background-color: transparent; /* Color of the tracking area */
|
|
}
|
|
|
|
/* Base wrapper for both preview and editor */
|
|
.sp-wrapper {
|
|
@apply flex h-full w-full grow flex-col;
|
|
}
|
|
|
|
/* Stack containers (sp-preview and sp-editor) */
|
|
.sp-preview,
|
|
.sp-editor {
|
|
@apply flex h-full w-full grow flex-col;
|
|
}
|
|
|
|
/* Inner containers */
|
|
.sp-preview-container,
|
|
.sp-code-editor {
|
|
@apply flex h-full w-full grow flex-col;
|
|
}
|
|
|
|
/* Content elements */
|
|
.sp-preview-iframe {
|
|
@apply h-full w-full grow;
|
|
}
|
|
|
|
.sp-cm {
|
|
@apply h-full w-full grow;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
|
|
20%, 40%, 60%, 80% { transform: translateX(3px); }
|
|
}
|
|
|
|
.shake {
|
|
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
|
|
}
|
|
|
|
.cm-content:focus {
|
|
outline: none !important;
|
|
}
|
|
|
|
p.whitespace-pre-wrap a, li a {
|
|
color: #0066cc;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.dark p.whitespace-pre-wrap a, .dark li a {
|
|
color: #52a0ff;
|
|
} |