How can I typehint custom vars correctly #2140
Description
Describe the bug
This is not a bug but I'm struggling with setting up custom vars correctly in state.py. I'm seeing this even though my var is typehinted:
TypeError: You must provide an annotation for the state var `_`. Annotation cannot be `typing.Any`
To Reproduce
state.py is below:
import reflex as rx
class Document(rx.Base):
id: int
title: str
abstract: str
num_words: int
class State(rx.State):
# The current question being asked.
question: str
# The retrieved list of documents.
docs: list[Document]
# Keep track of the chat history as a list of (question, docs) tuples.
chat_history: list[tuple[str, list[Document]]] = []
def retrieve_docs(self):
# Some business logic to return a list of records from a document database
# results = get_results(self.question)
results = [{"id": 14125, "title": "My Title", "abstract": "My Abstract", "num_words": 180}]
self.docs = [Document(**res) for res in results]
self.chat_history.append((self.question, self.docs))
chatapp.py is below:
import reflex as rx
from chatapp import style
from chatapp.state import State, Document
def doc_card(doc: Document) -> rx.Component:
return rx.card(
rx.text(doc.abstract),
header=rx.heading(doc.title, size="lg"),
footer=rx.heading(doc.num_words, size="sm"),
color_scheme="yellow",
)
def doc_qa(message: tuple[str, list[Document]]) -> rx.Component:
return rx.container(
rx.box(
rx.text(message[0], text_align="right"),
style=style.question_style,
),
rx.responsive_grid(
rx.foreach(
message[1], doc_card
),
columns=[3],
spacing="4"
)
)
def report_documents() -> rx.Component:
return rx.box(
rx.foreach(
State.chat_history,
doc_qa,
),
)
def action_bar() -> rx.Component:
return rx.hstack(
rx.input(
value=State.question,
placeholder="Ask a question",
on_change=State.set_question,
style=style.input_style,
),
rx.button(
"Ask",
on_click=State.retrieve_docs,
style=style.button_style,
),
)
def index() -> rx.Component:
return rx.container(
rx.heading("Chat app for documents", size="xl"),
rx.spacer(),
report_documents(),
action_bar(),
)
app = rx.App()
app.add_page(index)
app.compile()
Expected behavior
I'm expecting that the attributes of the var Document can be accessed from the frontend
Specifics (please complete the following information):
- Python Version: 3.11
- Reflex Version: 0.3.2
- OS: Mac OS Ventura 13.6.1