Spaces:
Sleeping
Sleeping
| from reactpy import component, html, svg, hooks | |
| from reactpy.core.hooks import use_ref | |
| def Footer(collapsed, set_collapsed): | |
| expanded_footer_ref = use_ref(None) | |
| collapsed_footer_ref = use_ref(None) | |
| if expanded_footer_ref.current is None: | |
| expanded_footer_ref.current = html.footer( | |
| { | |
| "style": { | |
| "backgroundColor": "#FFFFFF", | |
| "position": "fixed", | |
| "bottom": 0, | |
| "width": "100%", | |
| "height": "50px", | |
| } | |
| }, | |
| html.button( | |
| { | |
| "style": { | |
| "background": "none", | |
| "border": "none", | |
| "color": "#757575", | |
| "cursor": "pointer", | |
| "position": "absolute", | |
| "bottom": "5px", | |
| "right": "10px", | |
| }, | |
| "type": "button", | |
| "on_click": lambda _: set_collapsed(False) | |
| }, | |
| svg.svg( | |
| { | |
| "xmlns": "http://www.w3.org/2000/svg", | |
| "width": "24", | |
| "height": "24", | |
| "fill": "none", | |
| "stroke": "currentColor", | |
| "stroke-linecap": "round", | |
| "stroke-linejoin": "round", | |
| "stroke-width": "3", | |
| "viewBox": "0 0 24 24", | |
| }, | |
| svg.path({"d": "M19 14l-7-7-7 7"}) | |
| ) | |
| ) | |
| ) | |
| if collapsed_footer_ref.current is None: | |
| collapsed_footer_ref.current = html.footer( | |
| { | |
| "style": { | |
| "backgroundColor": "#FFFFFF", | |
| "position": "fixed", | |
| "bottom": 0, | |
| "width": "100%", | |
| } | |
| }, | |
| html.div( | |
| { | |
| "style": { | |
| "backgroundColor": "#FFFFFF", | |
| "padding": "0px 20px 0px 50px", | |
| "position": "relative", | |
| "display": "block", | |
| } | |
| }, | |
| html.button( | |
| { | |
| "style": { | |
| "position": "absolute", | |
| "right": "10px", | |
| "background": "none", | |
| "border": "none", | |
| "color": "#757575", | |
| "cursor": "pointer", | |
| }, | |
| "type": "button", | |
| "on_click": lambda _: set_collapsed(True) | |
| }, | |
| svg.svg( | |
| { | |
| "xmlns": "http://www.w3.org/2000/svg", | |
| "width": "24", | |
| "height": "24", | |
| "fill": "none", | |
| "stroke": "currentColor", | |
| "stroke-linecap": "round", | |
| "stroke-linejoin": "round", | |
| "stroke-width": "3", | |
| "viewBox": "0 0 24 24", | |
| }, | |
| svg.path({"d": "M18 6L6 18"}), | |
| svg.path({"d": "M6 6l12 12"}) | |
| ) | |
| ), | |
| html.p( | |
| { | |
| "style": { | |
| "fontSize": "20px", | |
| "color": "#4b4851" | |
| } | |
| }, | |
| "How this works?", | |
| ), | |
| html.p( | |
| { | |
| "style": { | |
| "color": "#757575", | |
| } | |
| }, | |
| "This app was built with ", | |
| html.a( | |
| { | |
| "href": "https://vectara.com/", | |
| "target": "_blank", | |
| }, | |
| "Vectara", | |
| ), | |
| html.br(), | |
| "It demonstrates the use of Agentic-RAG functionality with Vectara", | |
| ) | |
| ) | |
| ) | |
| if collapsed: | |
| return expanded_footer_ref.current | |
| else: | |
| return collapsed_footer_ref.current | |
| # from reactpy import component, html, svg, hooks | |
| # @component | |
| # def Footer(collapsed, set_collapsed): | |
| # if collapsed: | |
| # return html.footer( | |
| # { | |
| # "style": { | |
| # "backgroundColor": "#FFFFFF", | |
| # "position": "fixed", | |
| # "bottom": 0, | |
| # "width": "100%", | |
| # "height": "50px", | |
| # } | |
| # }, | |
| # html.button( | |
| # { | |
| # "style": { | |
| # "background": "none", | |
| # "border": "none", | |
| # "color": "#757575", | |
| # "cursor": "pointer", | |
| # "position": "absolute", | |
| # "bottom": "5px", | |
| # "right": "10px", | |
| # }, | |
| # "type": "button", | |
| # "on_click": lambda _: set_collapsed(False) | |
| # }, | |
| # svg.svg( | |
| # { | |
| # "xmlns": "http://www.w3.org/2000/svg", | |
| # "width": "24", | |
| # "height": "24", | |
| # "fill": "none", | |
| # "stroke": "currentColor", | |
| # "stroke-linecap": "round", | |
| # "stroke-linejoin": "round", | |
| # "stroke-width": "3", | |
| # "viewBox": "0 0 24 24", | |
| # }, | |
| # svg.path({"d": "M19 14l-7-7-7 7"}) | |
| # ) | |
| # ) | |
| # ) | |
| # else: | |
| # return html.footer( | |
| # { | |
| # "style": { | |
| # "backgroundColor": "#FFFFFF", | |
| # "position": "fixed", | |
| # "bottom": 0, | |
| # "width": "100%", | |
| # } | |
| # }, | |
| # html.div( | |
| # { | |
| # "style": { | |
| # "backgroundColor": "#FFFFFF", | |
| # "padding": "0px 20px 0px 50px", | |
| # "position": "relative", | |
| # "display": "block", | |
| # } | |
| # }, | |
| # html.button( | |
| # { | |
| # "style": { | |
| # "position": "absolute", | |
| # "right": "10px", | |
| # "background": "none", | |
| # "border": "none", | |
| # "color": "#757575", | |
| # "cursor": "pointer", | |
| # }, | |
| # "type": "button", | |
| # "on_click": lambda _: set_collapsed(True) | |
| # }, | |
| # svg.svg( | |
| # { | |
| # "xmlns": "http://www.w3.org/2000/svg", | |
| # "width": "24", | |
| # "height": "24", | |
| # "fill": "none", | |
| # "stroke": "currentColor", | |
| # "stroke-linecap": "round", | |
| # "stroke-linejoin": "round", | |
| # "stroke-width": "3", | |
| # "viewBox": "0 0 24 24", | |
| # }, | |
| # svg.path({"d": "M18 6L6 18"}), | |
| # svg.path({"d": "M6 6l12 12"}) | |
| # ) | |
| # ), | |
| # html.p( | |
| # { | |
| # "style": { | |
| # "fontSize": "20px", | |
| # "color": "#4b4851" | |
| # } | |
| # }, | |
| # "How this works?", | |
| # ), | |
| # html.p( | |
| # { | |
| # "style": { | |
| # "color": "#757575", | |
| # } | |
| # }, | |
| # "This app was built with ", | |
| # html.a( | |
| # { | |
| # "href": "https://vectara.com/", | |
| # "target": "_blank", | |
| # }, | |
| # "Vectara", | |
| # ), | |
| # html.br(), | |
| # "It demonstrates the use of Agentic-RAG functionality with Vectara", | |
| # ) | |
| # ) | |
| # ) | |