|
from reactpy import component, html, svg, hooks |
|
from reactpy.core.hooks import use_ref |
|
|
|
@component |
|
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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
