change circular button for bot builder

Author: anish-work

daras_ai_v2/base.py

@@ -419,7 +419,7 @@ def render_sidebar(self):
             return
 
         sidebar_ref = use_sidebar("builder-sidebar", self.request.session)
-        if sidebar_ref.is_open:
+        if sidebar_ref.is_open or sidebar_ref.is_mobile_open:
             gui.tag(
                 "button",
                 type="submit",
@@ -436,14 +436,35 @@ def render_sidebar(self):
             with gui.div(className="w-100 h-100"):
                 self._render_gooey_builder()
         else:
-            with gui.div(
-                className="w-100 position-absolute",
-                style={"bottom": "10px", "left": "10px"},
-            ):
-                gooey_builder_open_button = gui.button(
-                    label="<i class='fa-regular fa-message-smile'></i> Chat Assistant",
-                    className="btn btn-secondary rounded-pill",
-                )
+            with gui.styled("& .gooey-builder-open-button:hover { scale: 1.2; }"):
+                with gui.div(
+                    className="w-100 position-absolute",
+                    style={"bottom": "10px", "left": "10px", "z-index": "1000"},
+                ):
+                    gooey_builder_open_button = gui.button(
+                        label="<img src='https://storage.googleapis.com/dara-c1b52.appspot.com/daras_ai/media/63bdb560-b891-11f0-b9bc-02420a00014a/generate-ai-abstract-symbol-artificial-intelligence-colorful-stars-icon-vector%201.jpg' style='width: 48px; height: 48px; border-radius: 50%;' />",
+                        className="btn btn-secondary border-0 d-none d-lg-block p-0 gooey-builder-open-button",
+                        style={
+                            "width": "48px",
+                            "height": "48px",
+                            "borderRadius": "50%",
+                            "boxShadow": "#0000001a 0 1px 4px, #0003 0 2px 12px",
+                        },
+                    )
+                    gooey_builder_mobile_open_button = gui.button(
+                        label="<img src='https://storage.googleapis.com/dara-c1b52.appspot.com/daras_ai/media/63bdb560-b891-11f0-b9bc-02420a00014a/generate-ai-abstract-symbol-artificial-intelligence-colorful-stars-icon-vector%201.jpg' style='width: 48px; height: 48px; border-radius: 50%;' />",
+                        className="border-0 btn btn-secondary rounded-pill d-lg-none gooey-builder-open-button p-0",
+                        style={
+                            "width": "48px",
+                            "height": "48px",
+                            "borderRadius": "50%",
+                            "boxShadow": "#0000001a 0 1px 4px, #0003 0 2px 12px",
+                        },
+                    )
+            if gooey_builder_mobile_open_button:
+                sidebar_ref.set_mobile_open(True)
+                raise gui.RerunException()
+
             if gooey_builder_open_button:
                 sidebar_ref.set_open(True)
                 raise gui.RerunException()
@@ -1252,6 +1273,7 @@ def _render_gooey_builder(self):
         if not self.is_current_user_admin():
             return
         render_gooey_builder_inline(self.slug_versions[-1], gui.session_state)
+
         # render_gooey_builder(
         #     page_slug=self.slug_versions[-1],
         #     builder_state=dict(

widgets/sidebar.py

@@ -23,7 +23,7 @@ def set_open(self, value: bool):
 
     def set_mobile_open(self, value: bool):
         self.is_mobile_open = self.session[self.mobile_key] = value
-        self.set_open(value)
+        # self.set_open(value)
 
     @property
     def mobile_key(self):
@@ -204,13 +204,15 @@ def sidebar_mobile_header(request: Request):
 # Sidebar width variables
 sidebar_open_width = "340px"
 sidebar_closed_width = "0px"
-sidebar_mobile_width = "80vw"
+sidebar_mobile_width = "100vw"
 
 
 def sidebar_layout(sidebar_ref: SidebarRef):
     is_mobile_open = sidebar_ref.is_mobile_open
     sidebar_funtion_classes = (
-        "gooey-sidebar-open" if sidebar_ref.is_open else "gooey-sidebar-closed"
+        "gooey-sidebar-open"
+        if sidebar_ref.is_open or sidebar_ref.is_mobile_open
+        else "gooey-sidebar-closed"
     )
 
     side_bar_styles = dedent(
@@ -227,7 +229,6 @@ def sidebar_layout(sidebar_ref: SidebarRef):
             }}
 
             & .gooey-sidebar {{
-                transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                 background-color: #f9f9f9;
                 position: sticky;
                 top: 0;
@@ -255,8 +256,7 @@ def sidebar_layout(sidebar_ref: SidebarRef):
             @media (max-width: 767px) {{
                 & .gooey-sidebar-open {{
                     position: fixed;
-                    right: 0;
-                    left: auto;
+                    left: 0;
                     min-width: {sidebar_mobile_width};
                     width: {sidebar_mobile_width};
                     max-width: {sidebar_mobile_width};
@@ -265,13 +265,13 @@ def sidebar_layout(sidebar_ref: SidebarRef):
                     border-right: none;
                 }}
                 & .gooey-sidebar-closed {{
-                    position: fixed;
+                    position: sticky;
                     right: 0;
                     left: auto;
                     min-width: 0px;
                     width: 0px;
                     max-width: 0px;
-                    overflow: hidden;
+                    overflow: visible;
                 }}
             }}
         """