violit 0.0.1__py3-none-any.whl

violit/widgets/chart_widgets.py

@@ -0,0 +1,253 @@
+"""Chart Widgets Mixin for Violit"""
+
+from typing import Union, Optional, Any, Callable
+import pandas as pd
+import plotly.graph_objects as go
+import plotly.io as pio
+from ..component import Component
+from ..context import rendering_ctx
+from ..state import State
+
+
+class ChartWidgetsMixin:
+    """Chart widgets (line, bar, area, scatter, plotly, pyplot, etc.)"""
+    
+    def plotly_chart(self, fig: Union[go.Figure, Callable, State], use_container_width=True, render_mode="svg", **props):
+        """Display Plotly chart with Signal/Lambda support"""
+        cid = self._get_next_cid("plot")
+        
+        def builder():
+            # Handle Signal/Lambda/Direct Figure
+            current_fig = fig
+            if isinstance(fig, State):
+                token = rendering_ctx.set(cid)
+                current_fig = fig.value
+                rendering_ctx.reset(token)
+            elif callable(fig):
+                token = rendering_ctx.set(cid)
+                current_fig = fig()
+                rendering_ctx.reset(token)
+            
+            if current_fig is None:
+                return Component("div", id=f"{cid}_wrapper", content="No data")
+
+            # Force render_mode if requested (default: svg)
+            # Convert scattergl to scatter for SVG rendering
+            if render_mode == "svg" and hasattr(current_fig, "data"):
+                has_scattergl = any(trace.type == 'scattergl' for trace in current_fig.data)
+                if has_scattergl:
+                    # Create new figure with converted traces
+                    new_traces = []
+                    for trace in current_fig.data:
+                        if trace.type == 'scattergl':
+                            trace_dict = trace.to_plotly_json()
+                            trace_dict['type'] = 'scatter'
+                            new_traces.append(go.Scatter(trace_dict))
+                        else:
+                            new_traces.append(trace)
+                    # Recreate figure with new traces and original layout
+                    current_fig = go.Figure(data=new_traces, layout=current_fig.layout)
+                
+            fj = pio.to_json(current_fig)
+            width_style = "width: 100%;" if use_container_width else ""
+            html = f'''
+            <div id="{cid}" style="{width_style} height: 500px;"></div>
+            <script>(function(){{
+                const d = {fj};
+                if (window.Plotly) {{
+                    Plotly.newPlot('{cid}', d.data, d.layout, {{responsive: true}});
+                }} else {{
+                    console.error("Plotly not found");
+                }}
+            }})();</script>
+            '''
+            return Component("div", id=f"{cid}_wrapper", content=html)
+            
+        self._register_component(cid, builder)
+
+
+    def pyplot(self, fig=None, use_container_width=True, **props):
+        """Display Matplotlib figure"""
+        import matplotlib
+        matplotlib.use('Agg')
+        import matplotlib.pyplot as plt
+        import io
+        import base64
+        
+        cid = self._get_next_cid("pyplot")
+        
+        def builder():
+            current_fig = fig if fig is not None else plt.gcf()
+            
+            buf = io.BytesIO()
+            current_fig.savefig(buf, format='png', bbox_inches='tight', dpi=100)
+            buf.seek(0)
+            img_base64 = base64.b64encode(buf.read()).decode('utf-8')
+            buf.close()
+            
+            width_style = "width: 100%;" if use_container_width else ""
+            html = f'<img src="data:image/png;base64,{img_base64}" style="{width_style} height: auto;" />'
+            return Component("div", id=cid, content=html, class_="pyplot-container")
+        
+        self._register_component(cid, builder)
+
+    def line_chart(self, data, x=None, y=None, width=None, height=400, use_container_width=True, render_mode="svg", **props):
+        """Display simple line chart"""
+        cid = self._get_next_cid("line_chart")
+        
+        def builder():
+            x_data, y_data, trace_name = self._parse_chart_data(data, x, y)
+            
+            fig = go.Figure()
+            cls = go.Scattergl if render_mode == "webgl" else go.Scatter
+            fig.add_trace(cls(x=x_data, y=y_data, mode='lines+markers', name=trace_name))
+            fig.update_layout(
+                height=height,
+                margin=dict(l=0, r=0, t=30, b=0),
+                template='plotly_white'
+            )
+            
+            fj = pio.to_json(fig)
+            container_width = "width: 100%;" if use_container_width else f"width: {width}px;" if width else "width: 100%;"
+            html = f'''
+            <div id="{cid}" style="{container_width} height: {height}px;"></div>
+            <script>(function(){{
+                const d = {fj};
+                Plotly.newPlot('{cid}', d.data, d.layout, {{responsive: true}});
+            }})();</script>
+            '''
+            return Component("div", id=f"{cid}_wrapper", content=html)
+        
+        self._register_component(cid, builder)
+
+    def bar_chart(self, data, x=None, y=None, width=None, height=400, use_container_width=True, render_mode="svg", **props):
+        """Display simple bar chart"""
+        cid = self._get_next_cid("bar_chart")
+        
+        def builder():
+            x_data, y_data, trace_name = self._parse_chart_data(data, x, y)
+            
+            fig = go.Figure()
+            fig.add_trace(go.Bar(x=x_data, y=y_data, name=trace_name))
+            fig.update_layout(
+                height=height,
+                margin=dict(l=0, r=0, t=30, b=0),
+                template='plotly_white'
+            )
+            
+            fj = pio.to_json(fig)
+            container_width = "width: 100%;" if use_container_width else f"width: {width}px;" if width else "width: 100%;"
+            html = f'''
+            <div id="{cid}" style="{container_width} height: {height}px;"></div>
+            <script>(function(){{
+                const d = {fj};
+                Plotly.newPlot('{cid}', d.data, d.layout, {{responsive: true}});
+            }})();</script>
+            '''
+            return Component("div", id=f"{cid}_wrapper", content=html)
+        
+        self._register_component(cid, builder)
+
+    def area_chart(self, data, x=None, y=None, width=None, height=400, use_container_width=True, render_mode="svg", **props):
+        """Display area chart"""
+        cid = self._get_next_cid("area_chart")
+        
+        def builder():
+            x_data, y_data, trace_name = self._parse_chart_data(data, x, y)
+            
+            fig = go.Figure()
+            cls = go.Scattergl if render_mode == "webgl" else go.Scatter
+            fig.add_trace(cls(x=x_data, y=y_data, fill='tozeroy', name=trace_name))
+            fig.update_layout(
+                height=height,
+                margin=dict(l=0, r=0, t=30, b=0),
+                template='plotly_white'
+            )
+            
+            fj = pio.to_json(fig)
+            container_width = "width: 100%;" if use_container_width else f"width: {width}px;" if width else "width: 100%;"
+            html = f'''
+            <div id="{cid}" style="{container_width} height: {height}px;"></div>
+            <script>(function(){{
+                const d = {fj};
+                Plotly.newPlot('{cid}', d.data, d.layout, {{responsive: true}});
+            }})();</script>
+            '''
+            return Component("div", id=f"{cid}_wrapper", content=html)
+        
+        self._register_component(cid, builder)
+
+    def scatter_chart(self, data, x=None, y=None, width=None, height=400, use_container_width=True, render_mode="svg", **props):
+        """Display scatter chart"""
+        cid = self._get_next_cid("scatter_chart")
+        
+        def builder():
+            x_data, y_data, trace_name = self._parse_chart_data(data, x, y)
+            
+            fig = go.Figure()
+            cls = go.Scattergl if render_mode == "webgl" else go.Scatter
+            fig.add_trace(cls(x=x_data, y=y_data, mode='markers', name=trace_name))
+            fig.update_layout(
+                height=height,
+                margin=dict(l=0, r=0, t=30, b=0),
+                template='plotly_white'
+            )
+            
+            fj = pio.to_json(fig)
+            container_width = "width: 100%;" if use_container_width else f"width: {width}px;" if width else "width: 100%;"
+            html = f'''
+            <div id="{cid}" style="{container_width} height: {height}px;"></div>
+            <script>(function(){{
+                const d = {fj};
+                Plotly.newPlot('{cid}', d.data, d.layout, {{responsive: true}});
+            }})();</script>
+            '''
+            return Component("div", id=f"{cid}_wrapper", content=html)
+        
+        self._register_component(cid, builder)
+
+    def bokeh_chart(self, figure, use_container_width=True, **props):
+        """Display Bokeh chart"""
+        from bokeh.embed import components
+        
+        cid = self._get_next_cid("bokeh_chart")
+        
+        def builder():
+            script, div = components(figure)
+            width_style = "width: 100%;" if use_container_width else ""
+            html = f'''
+            <div style="{width_style}">
+                {div}
+                {script}
+            </div>
+            '''
+            return Component("div", id=cid, content=html)
+        
+        self._register_component(cid, builder)
+
+    def _parse_chart_data(self, data, x, y):
+        """Parse chart data into x, y, and trace name"""
+        if isinstance(data, pd.DataFrame):
+            if x and y:
+                x_data = data[x].tolist()
+                y_data = data[y].tolist()
+                trace_name = y
+            elif y:
+                x_data = list(range(len(data)))
+                y_data = data[y].tolist()
+                trace_name = y
+            else:
+                cols = data.columns.tolist()
+                x_data = data[cols[0]].tolist()
+                y_data = data[cols[1]].tolist() if len(cols) > 1 else list(range(len(data)))
+                trace_name = cols[1] if len(cols) > 1 else 'Value'
+        elif isinstance(data, (list, tuple)):
+            x_data = list(range(len(data)))
+            y_data = list(data)
+            trace_name = 'Value'
+        else:
+            x_data = []
+            y_data = []
+            trace_name = 'Value'
+        
+        return x_data, y_data, trace_name

violit/widgets/chat_widgets.py

@@ -0,0 +1,221 @@
+from typing import Optional, Union, Callable
+from ..component import Component
+from ..context import fragment_ctx
+from ..state import get_session_store
+
+class ChatWidgetsMixin:
+    """Chat-related widgets"""
+    
+    def chat_message(self, name: str, avatar: Optional[str] = None):
+        """
+        Insert a chat message container.
+        
+        Args:
+            name (str): The name of the author (e.g. "user", "assistant").
+            avatar (str, optional): The avatar image or emoji.
+        """
+        cid = self._get_next_cid("chat_message")
+        
+        class ChatMessageContext:
+            def __init__(self, app, message_id, name, avatar):
+                self.app = app
+                self.message_id = message_id
+                self.name = name
+                self.avatar = avatar
+                self.token = None
+                
+            def __enter__(self):
+                # Register builder
+                def builder():
+                    store = get_session_store()
+                    
+                    # Collected content
+                    htmls = []
+                    # Check static
+                    for cid_child, b in self.app.static_fragment_components.get(self.message_id, []):
+                        htmls.append(b().render())
+                    # Check session
+                    for cid_child, b in store['fragment_components'].get(self.message_id, []):
+                        htmls.append(b().render())
+                    
+                    inner_html = "".join(htmls)
+                    
+                    # determine avatar and background
+                    bg_color = "transparent"
+                    avatar_content = ""
+                    
+                    # Icons handling
+                    if self.avatar:
+                        if self.avatar.startswith("http") or self.avatar.startswith("data:"):
+                            avatar_content = f'<img src="{self.avatar}" style="width:32px;height:32px;border-radius:4px;object-fit:cover;">'
+                        else:
+                            avatar_content = f'<div style="width:32px;height:32px;border-radius:4px;background:#eee;display:flex;align-items:center;justify-content:center;font-size:20px;">{self.avatar}</div>'
+                    else:
+                        if self.name == "user":
+                            avatar_content = f'<div style="width:32px;height:32px;border-radius:4px;background:#7C4DFF;color:white;display:flex;align-items:center;justify-content:center;"><sl-icon name="person-fill"></sl-icon></div>'
+                            bg_color = "rgba(124, 77, 255, 0.05)"
+                        elif self.name == "assistant":
+                            avatar_content = f'<div style="width:32px;height:32px;border-radius:4px;background:#FF5252;color:white;display:flex;align-items:center;justify-content:center;"><sl-icon name="robot"></sl-icon></div>'
+                            bg_color = "rgba(255, 82, 82, 0.05)"
+                        else:
+                            initial = self.name[0].upper() if self.name else "?"
+                            avatar_content = f'<div style="width:32px;height:32px;border-radius:4px;background:#9CA3AF;color:white;display:flex;align-items:center;justify-content:center;font-weight:bold;">{initial}</div>'
+                            bg_color = "rgba(0,0,0,0.02)"
+
+                    html = f'''
+                    <div class="chat-message" style="display:flex; gap:16px; margin-bottom:16px; padding:16px; border-radius:8px; background:{bg_color};">
+                        <div class="chat-avatar" style="flex-shrink:0;">
+                           {avatar_content}
+                        </div>
+                        <div class="chat-content" style="flex:1; min-width:0; overflow-wrap:break-word;">
+                            {inner_html}
+                        </div>
+                    </div>
+                    '''
+                    return Component("div", id=self.message_id, content=html)
+                
+                self.app._register_component(self.message_id, builder)
+                
+                self.token = fragment_ctx.set(self.message_id)
+                return self
+                
+            def __exit__(self, exc_type, exc_val, exc_tb):
+                if self.token:
+                    fragment_ctx.reset(self.token)
+            
+            def __getattr__(self, name):
+                return getattr(self.app, name)
+                
+        return ChatMessageContext(self, cid, name, avatar)
+
+    def chat_input(self, placeholder: str = "Your message", on_submit: Optional[Callable[[str], None]] = None, auto_scroll: bool = True):
+        """
+        Display a chat input widget at the bottom of the page.
+        
+        Args:
+            placeholder (str): Placeholder text.
+            on_submit (Callable[[str], None]): Callback function to run when message is sent.
+            auto_scroll (bool): If True, automatically scroll to bottom after rendering.
+        """
+        cid = self._get_next_cid("chat_input")
+        store = get_session_store()
+        
+        # Register action handler
+        def handler(val):
+            if on_submit:
+                on_submit(val)
+                
+        self.static_actions[cid] = handler
+            
+        def builder():
+            # Fixed bottom input
+            # We use window.lastActiveChatInput to restore focus after re-render/replacement
+            scroll_script = "window.scrollTo(0, document.body.scrollHeight);" if auto_scroll else ""
+            
+            html = f'''
+            <div class="chat-input-container" style="
+                position: fixed; 
+                bottom: 0; 
+                left: 0;
+                right: 0;
+                padding: 20px; 
+                background: linear-gradient(to top, var(--sl-bg) 80%, transparent);
+                z-index: 1000;
+                display: flex;
+                justify-content: center;
+                pointer-events: none;
+            ">
+                <div style="
+                    width: 100%; 
+                    max-width: 800px; 
+                    background: var(--sl-bg-card); 
+                    border: 1px solid var(--sl-border); 
+                    border-radius: 8px; 
+                    padding: 8px; 
+                    box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
+                    display: flex;
+                    gap: 8px;
+                    pointer-events: auto;
+                ">
+                    <input type="text" id="input_{cid}" class="chat-input-box" placeholder="{placeholder}" 
+                        style="
+                            flex: 1; 
+                            border: none; 
+                            background: transparent; 
+                            padding: 8px; 
+                            font-size: 1rem; 
+                            color: var(--sl-text); 
+                            outline: none;
+                        "
+                        onkeydown="if(event.key==='Enter'){{ 
+                            window.chatInputWasActive = true;
+                            {f"sendAction('{cid}', this.value);" if self.mode == 'ws' else f"htmx.ajax('POST', '/action/{cid}', {{values: {{value: this.value}}, swap: 'none'}});"}
+                            this.value = ''; 
+                        }}"
+                    >
+                    <sl-button size="small" variant="primary" circle onclick="
+                        const el = document.getElementById('input_{cid}');
+                        window.chatInputWasActive = true;
+                        {f"sendAction('{cid}', el.value);" if self.mode == 'ws' else f"htmx.ajax('POST', '/action/{cid}', {{values: {{value: el.value}}, swap: 'none'}});"}
+                        el.value = '';
+                    ">
+                        <sl-icon name="send" label="Send"></sl-icon>
+                    </sl-button>
+                </div>
+            </div>
+            <!-- Spacer -->
+            <div style="height: 100px;"></div>
+            <script>
+                // Auto-scroll if enabled
+                if ("{auto_scroll}" === "True") {{
+                    setTimeout(() => {{ 
+                        window.scrollTo({{
+                            top: document.documentElement.scrollHeight,
+                            behavior: 'smooth'
+                        }});
+                    }}, 100);
+                }}
+
+                // Restore focus if a chat input was just used
+                if (window.chatInputWasActive) {{
+                    setTimeout(() => {{
+                        // Find ANY chat input box
+                        const el = document.querySelector('.chat-input-box');
+                        if (el) {{
+                            el.focus();
+                        }}
+                        window.chatInputWasActive = false;
+                    }}, 150);
+                }}
+            </script>
+            '''
+            return Component("div", id=cid, content=html)
+            
+        self._register_component(cid, builder)
+        
+        # Return the value just submitted, or None
+        # We need to check if this specific component triggered the action in this cycle
+        # This is tricky without a dedicated 'current_action_trigger' context.
+        # In `App.action`, it calls the handler. 
+        # If we use `actions` dict in store, it persists. 
+        # We want `chat_input` to return the value ONLY when it was just submitted.
+        
+        # Hack: Check if this cid matches the latest action if we had that info.
+        # Alternative: The user code uses `if prompt := app.chat_input():`.
+        # This implies standard rerun logic.
+        # If the frontend sent an action for `cid`, `store['actions'][cid]` will be set.
+        # We should probably clear it after reading to behave like a one-time event?
+        # But if we clear it here, and the script reruns multiple times or checks it multiple times? 
+        # Usually it's read once per run.
+        
+        val = store['actions'].get(cid)
+        
+        # To prevent stale values on subsequent non-related runs (e.g. other buttons),
+        # we ideally need to know 'who' triggered the run.
+        # But for now, returning what's in store is the best approximation.
+        # If another button is clicked, `store['actions']` might still have this cid's old value 
+        # if we don't clear it. 
+        # However, `store['actions']` is persistent in the current `app.py` logic?
+        # Let's check app.py action handler. 
+        
+        return val