Update pages/Artifacts.py

pages/Artifacts.py

@@ -11,62 +11,34 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom Theme and Styling for Dark Mode
-st.markdown("""
-    <style>
-    /* Dark mode styles */
-    .main {
-        background-color: #1e1e1e;
-        color: #ffffff;
-    }
-    
-    .artifact-container {
-        background-color: #2d2d2d;
-        border-radius: 10px;
-        padding: 20px;
-        margin: 10px 0;
-    }
-    
-    .artifact-preview {
-        background-color: #3d3d3d;
-        border-radius: 5px;
-        padding: 20px;
-        margin-top: 10px;
-    }
-    
-    .stTabs [data-baseweb="tab"] {
-        background-color: #3d3d3d;
-        color: #ffffff;
-    }
-    
-    .stTabs [data-baseweb="tab-panel"] {
-        background-color: #2d2d2d;
-        color: #ffffff;
-    }
-    
-    iframe {
-        border: 1px solid #4d4d4d;
-        border-radius: 5px;
-    }
-    </style>
-""", unsafe_allow_html=True)
-
 # Initialize React component for previews
 react_component = declare_component("react_component", path="frontend/build")
 
-def render_react_preview(component_code):
-    """Render React component preview"""
+def render_artifact(content, artifact_type):
+    """Render an artifact based on its type"""
     try:
-        escaped_code = json.dumps(component_code)
-        return react_component(code=escaped_code, key="preview")
+        if artifact_type == "text/html":
+            # Create responsive container for HTML content
+            st.markdown(f"""
+                <div style="position: relative; padding-bottom: 75%; height: 0;">
+                    <iframe src="data:text/html;charset=utf-8,{content.replace('"', '&quot;')}" 
+                            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
+                    </iframe>
+                </div>
+            """, unsafe_allow_html=True)
+        elif artifact_type == "application/vnd.ant.react":
+            react_component(code=content, key=f"preview_{hash(content)}")
     except Exception as e:
-        st.error(f"Error rendering React component: {str(e)}")
-        return None
+        st.error(f"Error rendering artifact: {str(e)}")
+        st.code(content)
+
+# Initialize session state if needed
+if "artifacts" not in st.session_state:
+    st.session_state.artifacts = []
 
 # Main interface
 st.title("🎨 Artifacts Viewer")
 
-# Check if there are any artifacts
 if not st.session_state.artifacts:
     st.info("No artifacts generated yet. Start a conversation in the Chat page to generate some!")
 else:
@@ -87,22 +59,7 @@ else:
             preview_tab, code_tab = st.tabs(["Preview", "Code"])
             
             with preview_tab:
-                st.markdown('<div class="artifact-preview">', unsafe_allow_html=True)
-                
-                if artifact['type'] == "text/html":
-                    # Create responsive container for HTML content
-                    st.markdown(f"""
-                        <div style="position: relative; padding-bottom: 75%; height: 0;">
-                            <iframe src="data:text/html;charset=utf-8,{artifact['content'].replace('"', '&quot;')}" 
-                                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-                            </iframe>
-                        </div>
-                    """, unsafe_allow_html=True)
-                
-                elif artifact['type'] == "application/vnd.ant.react":
-                    render_react_preview(artifact['content'])
-                
-                st.markdown('</div>', unsafe_allow_html=True)
+                render_artifact(artifact['content'], artifact['type'])
             
             with code_tab:
                 st.code(