Use reflex for Python full-stack

[marcusschiesser]

could be based on https://github.com/reflex-dev/reflex-examples/pull/269

[elviskahoro]

@marcusschiesser this might be better: https://github.com/reflex-dev/reflex-llamaindex-template

Still have a bunch of features I want to add to the chat app

[marcusschiesser]

@elviskahoro thanks for the input! Our goal is to have the Reflex template as similar to the NextJS template as possible, so we will first extract some UI components from the NextJS template: https://github.com/run-llama/create-llama/issues/382

Then, we can use them in our upcoming Reflex template. So, the structure of our Reflex template will be based on your code, but we will use the chat components of https://github.com/run-llama/create-llama/issues/382.

You might even consider using them yourself, as they have a lot of features, e.g. widgets for LLM tools, image and document uploads and viewers, etc.

[marcusschiesser]

@elviskahoro I tried using our chat-ui components in your chat example (just the chat messages for the start), see https://github.com/reflex-dev/reflex-examples/pull/278

I am not sure how to use object parameters in rx.Component, so I guess, that's why I am running in this error below. Would be great if you can have a look.

Traceback (most recent call last):
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/bin/reflex", line 8, in <module>
    sys.exit(cli())
             ^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/typer/main.py", line 338, in __call__
    raise e
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/typer/main.py", line 321, in __call__
    return get_command(self)(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/click/core.py", line 1157, in __call__
    return self.main(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/typer/core.py", line 728, in main
    return _main(
           ^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/typer/core.py", line 197, in _main
    rv = self.invoke(ctx)
         ^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/click/core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/click/core.py", line 1434, in invoke
    return ctx.invoke(self.callback, **ctx.params)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/click/core.py", line 783, in invoke
    return __callback(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/typer/main.py", line 703, in wrapper
    return callback(**use_params)
           ^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/reflex/reflex.py", line 295, in run
    _run(env, frontend, backend, frontend_port, backend_port, backend_host, loglevel)
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/reflex/reflex.py", line 210, in _run
    prerequisites.get_compiled_app()
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/reflex/utils/prerequisites.py", line 312, in get_compiled_app
    app_module = get_app(reload=reload)
                 ^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/reflex/utils/prerequisites.py", line 285, in get_app
    app = __import__(module, fromlist=(constants.CompileVars.APP,))
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/code/llamaindex/reflex-examples/chat_v2/chat_v2/chat_v2.py", line 12, in <module>
    component=chat_page(
              ^^^^^^^^^^
  File "/Users/marcus/code/llamaindex/reflex-examples/chat_v2/chat_v2/page_chat/chat_page.py", line 49, in chat_page
    return _chat_box(
           ^^^^^^^^^^
  File "/Users/marcus/code/llamaindex/reflex-examples/chat_v2/chat_v2/page_chat/chat_page.py", line 25, in _chat_box
    chat_body(
  File "/Users/marcus/code/llamaindex/reflex-examples/chat_v2/chat_v2/page_chat/chat_body.py", line 120, in chat_body
    rx.foreach(
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/reflex/components/core/foreach.py", line 75, in create
    component.children = [component._render().render_component()]
                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/reflex/components/tags/iter_tag.py", line 135, in render_component
    component = self.render_fn(arg)
                ^^^^^^^^^^^^^^^^^^^
  File "/Users/marcus/code/llamaindex/reflex-examples/chat_v2/chat_v2/page_chat/chat_body.py", line 101, in render_chat_interaction
    message=Message(
            ^^^^^^^^
  File "/Users/marcus/Library/Caches/pypoetry/virtualenvs/chat-v2-xv2YwYLc-py3.12/lib/python3.12/site-packages/pydantic/v1/main.py", line 341, in __init__
    raise validation_error
pydantic.v1.error_wrappers.ValidationError: 1 validation error for Message
content
  str type expected (type=type_error.str)

[marcusschiesser]

This issue is solved (it was just caused by pydantic validation).

Then I ran into the issue that my component is importing CSS, so I temporarily removed the CSS in this PR for chat-ui: https://github.com/run-llama/chat-ui/pull/8

When I now use @elviskahoro's chat app (with this updated code: https://github.com/reflex-dev/reflex-examples/pull/278/files) and use bun link to link the local code from my PR: https://github.com/run-llama/chat-ui/pull/8 into Reflex's .web directory

Then the app is rendered:

but if i enter some text the rendering of the chat-ui component is triggered and I am getting this error:

This doesn't happen in pure React: If you use the ChatMessage standalone a ChatMessageProvider is wrapped, see https://github.com/run-llama/chat-ui/blob/2e7a19e216aa0cccc734c414551e244fba2e1373/packages/chat-ui/src/chat/chat-message.tsx#L53

The first error in the console log is actually:

chat-message.js:11 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

My best guess is that we're having two react versions - chat-ui has react as peerDepedency

Maybe bun link is not working correctly?

[marcusschiesser]

Blocked by the following error using chat-ui 0.0.5: