Spaces:
Sleeping
Sleeping
File size: 5,930 Bytes
757fbed 93577c7 757fbed 93577c7 684067e f66fd15 684067e f66fd15 93577c7 684067e f66fd15 93577c7 684067e 93577c7 757fbed f66fd15 757fbed f66fd15 757fbed 684067e 757fbed 684067e 757fbed 684067e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
from reactpy import component, html, svg
from reactpy.core.hooks import use_ref
@component
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"})
# )
# )
# ) |