Spaces:
Sleeping
Sleeping
| from reactpy import component, html, svg | |
| from reactpy.core.hooks import use_ref | |
| def ChatBox(message, set_message, send_message, collapsed): | |
| # Store the static SVG button in a ref so it doesn't re-render unnecessarily | |
| send_button_ref = use_ref(None) | |
| def handle_input_change(event): | |
| # Update the message state when input changes | |
| set_message(event['target']['value']) | |
| def handle_key_down(event): | |
| # Check for Enter key and send message if the message is not empty | |
| if event['key'] == 'Enter' and message.strip(): | |
| send_message() | |
| # Only define the static button SVG once | |
| if send_button_ref.current is None: | |
| send_button_ref.current = svg.svg( | |
| { | |
| "xmlns": "http://www.w3.org/2000/svg", | |
| "width": "20", | |
| "height": "20", | |
| "fill": "none", | |
| "stroke": "currentColor", | |
| "stroke-linecap": "round", | |
| "stroke-linejoin": "round", | |
| "stroke-width": "2", | |
| "viewBox": "0 0 24 24", | |
| "class": "feather feather-send", | |
| }, | |
| svg.path({"d": "M22 2 11 13"}), | |
| svg.path({"d": "M22 2 15 22 11 13 2 9z"}) | |
| ) | |
| return html.div( | |
| { | |
| "style": { | |
| "position": "fixed", | |
| "bottom": "70px" if collapsed else "140px", | |
| "left": "50%", | |
| "transform": "translateX(-50%)", | |
| "width": "80%", | |
| "display": "flex", | |
| "alignItems": "center", | |
| "backgroundColor": "#FFFFFF", | |
| "borderRadius": "50px", | |
| "zIndex": "1000", | |
| } | |
| }, | |
| html.input( | |
| { | |
| "type": "text", | |
| "value": message, | |
| "placeholder": "Your Message", | |
| "onChange": handle_input_change, | |
| "onKeyDown": handle_key_down, | |
| "style": { | |
| "width": "100%", | |
| "padding": "10px 50px 10px 20px", | |
| "border": "none", | |
| "borderRadius": "50px", | |
| "color": "#65558F", | |
| } | |
| } | |
| ), | |
| html.button( | |
| { | |
| "type": "button", | |
| "onClick": send_message, | |
| "style": { | |
| "position": "absolute", | |
| "right": "8px", | |
| "top": "50%", | |
| "transform": "translateY(-50%)", | |
| "background": "none", | |
| "border": "none", | |
| "cursor": "pointer", | |
| "padding": "8px", | |
| "display": "flex", | |
| "alignItems": "center", | |
| "justifyContent": "center", | |
| } | |
| }, | |
| send_button_ref.current # Render the cached send button | |
| ) | |
| ) | |
| # from reactpy import component, html, svg | |
| # from reactpy.core.hooks import use_ref | |
| # @component | |
| # # def ChatBox(message, set_message, handle_input_change, handle_key_down, send_message, collapsed): | |
| # def ChatBox(message, set_message, send_message, collapsed): | |
| # def handle_input_change(event): | |
| # set_message(event['target']['value']) | |
| # def handle_key_down(event): | |
| # if event['key'] == 'Enter' and message.strip(): | |
| # send_message() | |
| # return html.div( | |
| # { | |
| # "style": { | |
| # "position": "fixed", | |
| # "bottom": "70px" if collapsed else "140px", | |
| # "left": "50%", | |
| # "transform": "translateX(-50%)", | |
| # "width": "80%", | |
| # "display": "flex", | |
| # "alignItems": "center", | |
| # "backgroundColor": "#FFFFFF", | |
| # "borderRadius": "50px", | |
| # "zIndex": "1000", | |
| # } | |
| # }, | |
| # html.input( | |
| # { | |
| # "type": "text", | |
| # "value": message, | |
| # "placeholder": "Your Message", | |
| # "onChange": handle_input_change, | |
| # "onKeyDown": handle_key_down, | |
| # "style": { | |
| # "width": "100%", | |
| # "padding": "10px 50px 10px 20px", | |
| # "border": "none", | |
| # "borderRadius": "50px", | |
| # "color": "#65558F", | |
| # } | |
| # } | |
| # ), | |
| # html.button( | |
| # { | |
| # "type": "button", | |
| # "onClick": send_message, | |
| # "style": { | |
| # "position": "absolute", | |
| # "right": "8px", | |
| # "top": "50%", | |
| # "transform":"translateY(-50%)", | |
| # "background": "none", | |
| # "border": "none", | |
| # "cursor": "pointer", | |
| # "padding": "8px", | |
| # "display": "flex", | |
| # "alignItems": "center", | |
| # "justifyContent": "center", | |
| # } | |
| # }, | |
| # svg.svg( | |
| # { | |
| # "xmlns": "http://www.w3.org/2000/svg", | |
| # "width": "20", | |
| # "height": "20", | |
| # "fill": "none", | |
| # "stroke": "currentColor", | |
| # "stroke-linecap": "round", | |
| # "stroke-linejoin": "round", | |
| # "stroke-width": "2", | |
| # "viewBox": "0 0 24 24", | |
| # "class": "feather feather-send", | |
| # }, | |
| # svg.path({"d": "M22 2 11 13"}), | |
| # svg.path({"d": "M22 2 15 22 11 13 2 9z"}) | |
| # ) | |
| # ) | |
| # ) |