appkit-assistant 0.7.1__py3-none-any.whl

appkit_assistant/components/message.py

@@ -0,0 +1,299 @@
+import reflex as rx
+
+import appkit_mantine as mn
+from appkit_assistant.backend.models import (
+    Message,
+    MessageType,
+)
+from appkit_assistant.state.thread_state import (
+    Thinking,
+    ThinkingStatus,
+    ThinkingType,
+    ThreadState,
+)
+from appkit_ui.components.collabsible import collabsible
+
+message_styles = {
+    "spacing": "4",
+    "width": "100%",
+    "max_width": "880px",
+    "margin_top": "24px",
+    "margin_left": "auto",
+    "margin_right": "auto",
+}
+
+
+class MessageComponent:
+    @staticmethod
+    def human_message(message: str) -> rx.Component:
+        return rx.hstack(
+            rx.spacer(),
+            rx.box(
+                rx.text(
+                    message,
+                    padding="0.5em",
+                    border_radius="10px",
+                    white_space="pre-line",
+                ),
+                padding="4px",
+                max_width="80%",
+                margin_top="24px",
+                # margin_right="14px",
+                background_color=rx.color_mode_cond(
+                    light=rx.color("accent", 3),
+                    dark=rx.color("accent", 3),
+                ),
+                border_radius="9px",
+            ),
+            style=message_styles,
+        )
+
+    @staticmethod
+    def assistant_message(message: Message) -> rx.Component:
+        """Display an assistant message with thinking content when items exist."""
+
+        # Show thinking content only for the last assistant message
+        should_show_thinking = (
+            message.text == ThreadState.last_assistant_message_text
+        ) & ThreadState.has_thinking_content
+
+        # Main content area with all components
+        content_area = rx.vstack(
+            # Always rendered with conditional styling for smooth animations
+            collabsible(
+                rx.scroll_area(
+                    rx.foreach(
+                        ThreadState.thinking_items,
+                        lambda item: ToolCallComponent.render(item),
+                    ),
+                    spacing="3",
+                    max_height="180px",
+                    padding="9px 12px",
+                    width="100%",
+                    scrollbars="vertical",
+                ),
+                title="Denkprozess & Werkzeuge",
+                info_text=(
+                    f"{ThreadState.unique_reasoning_sessions.length()} "
+                    f"Nachdenken, "
+                    f"{ThreadState.unique_tool_calls.length()} Werkzeuge"
+                ),
+                show_condition=should_show_thinking,
+                expanded=ThreadState.thinking_expanded,
+                on_toggle=ThreadState.toggle_thinking_expanded,
+            ),
+            # Main message content
+            rx.cond(
+                message.text == "",
+                rx.hstack(
+                    rx.text(
+                        rx.cond(
+                            ThreadState.current_activity != "",
+                            ThreadState.current_activity,
+                            "Denke nach",
+                        ),
+                        color=rx.color("gray", 8),
+                        margin_right="9px",
+                    ),
+                    rx.hstack(
+                        rx.el.span(""),
+                        rx.el.span(""),
+                        rx.el.span(""),
+                        rx.el.span(""),
+                    ),
+                    class_name="loading",
+                    height="40px",
+                    color=rx.color("gray", 8),
+                    background_color=rx.color("gray", 2),
+                    padding="0.5em",
+                    border_radius="9px",
+                    margin_top="16px",
+                    padding_right="18px",
+                ),
+                # Actual message content
+                mn.markdown_preview(
+                    source=message.text,
+                    enable_mermaid=message.done,
+                    enable_katex=message.done,
+                    security_level="standard",
+                    padding="0.5em",
+                    border_radius="9px",
+                    max_width="90%",
+                    class_name="markdown",
+                ),
+                # rx.markdown(
+                #     message.text,
+                #     padding="0.5em",
+                #     border_radius="9px",
+                #     max_width="90%",
+                #     class_name="markdown",
+                # ),
+            ),
+            spacing="3",
+            width="100%",
+        )
+
+        return rx.hstack(
+            rx.avatar(
+                fallback="AI",
+                size="3",
+                variant="soft",
+                radius="full",
+                margin_top="16px",
+            ),
+            content_area,
+            style=message_styles,
+        )
+
+    @staticmethod
+    def info_message(message: str) -> rx.Component:
+        return rx.hstack(
+            rx.avatar(
+                fallback="AI",
+                size="3",
+                variant="soft",
+                radius="full",
+                margin_top="16px",
+            ),
+            rx.callout(
+                message,
+                icon="info",
+                max_width="90%",
+                size="1",
+                padding="0.5em",
+                border_radius="9px",
+                margin_top="18px",
+            ),
+            style=message_styles,
+        )
+
+    @staticmethod
+    def render_message(
+        message: Message,
+    ) -> rx.Component:
+        """Render message with optional enhanced chunk-based components."""
+        return rx.fragment(
+            rx.match(
+                message.type,
+                (
+                    MessageType.HUMAN,
+                    MessageComponent.human_message(message.text),
+                ),
+                (
+                    MessageType.ASSISTANT,
+                    MessageComponent.assistant_message(message),
+                ),
+                MessageComponent.info_message(message.text),
+            )
+        )
+
+
+class ToolCallComponent:
+    """Component for displaying individual tool calls with green styling."""
+
+    @staticmethod
+    def render(tool_item: Thinking) -> rx.Component:
+        return rx.cond(
+            tool_item.type == ThinkingType.REASONING,
+            ToolCallComponent._render_reasoning(tool_item),
+            ToolCallComponent._render_tool_call(tool_item),
+        )
+
+    @staticmethod
+    def _render_reasoning(item: Thinking) -> rx.Component:
+        return rx.vstack(
+            rx.text(item.text, size="1"),
+            border_left=f"3px solid {rx.color('gray', 4)}",
+            padding="3px 6px",
+            margin_bottom="9px",
+        )
+
+    @staticmethod
+    def _render_tool_call(item: Thinking) -> rx.Component:
+        return rx.vstack(
+            rx.hstack(
+                rx.icon("wrench", size=14, color=rx.color("green", 8)),
+                rx.text(
+                    f"Werkzeug: {item.tool_name}",
+                    size="1",
+                    font_weight="bold",
+                    color=rx.color("blue", 9),
+                ),
+                rx.spacer(),
+                rx.text(
+                    item.id,
+                    size="1",
+                    color=rx.color("gray", 6),
+                ),
+                spacing="1",
+                margin_bottom="3px",
+                width="100%",
+            ),
+            rx.cond(
+                item.text,
+                rx.vstack(
+                    rx.text(
+                        item.text,
+                        size="1",
+                        color=rx.color("gray", 10),
+                    ),
+                    align="start",
+                    width="100%",
+                ),
+            ),
+            rx.cond(
+                item.parameters,
+                rx.vstack(
+                    rx.text(
+                        item.parameters,
+                        size="1",
+                        color=rx.color("blue", 9),
+                        white_space="pre-wrap",
+                    ),
+                    align="start",
+                    width="100%",
+                    spacing="1",
+                ),
+            ),
+            rx.cond(
+                item.status == ThinkingStatus.COMPLETED,
+                rx.scroll_area(
+                    rx.text(
+                        item.result,
+                        size="1",
+                        color=rx.color("gray", 8),
+                    ),
+                    max_height="60px",
+                    width="95%",
+                    scrollbars="vertical",
+                ),
+            ),
+            rx.cond(
+                item.status == ThinkingStatus.ERROR,
+                rx.vstack(
+                    rx.hstack(
+                        rx.icon("shield-alert", size=14, color=rx.color("red", 10)),
+                        rx.text(
+                            "Fehler",
+                            size="1",
+                            font_weight="bold",
+                            color=rx.color("red", 10),
+                        ),
+                        spacing="1",
+                    ),
+                    rx.text(
+                        item.error,
+                        size="1",
+                        color=rx.color("red", 9),
+                    ),
+                    align="start",
+                    width="100%",
+                    spacing="1",
+                ),
+            ),
+            padding="3px 6px",
+            border_left=f"3px solid {rx.color('gray', 5)}",
+            margin_bottom="9px",
+            width="100%",
+            spacing="2",
+        )

appkit_assistant/components/thread.py

@@ -0,0 +1,252 @@
+import logging
+from collections.abc import Callable
+
+import reflex as rx
+
+import appkit_mantine as mn
+from appkit_assistant.components import composer
+from appkit_assistant.components.message import MessageComponent
+from appkit_assistant.components.threadlist import ThreadList
+from appkit_assistant.state.thread_state import (
+    Message,
+    MessageType,
+    ThreadListState,
+    ThreadState,
+)
+
+logger = logging.getLogger(__name__)
+
+
+class Assistant:
+    @staticmethod
+    def suggestion(
+        prompt: str,
+        icon: str | None = None,
+        update_prompt: Callable | None = None,
+        **props,
+    ) -> rx.Component:
+        """Component to display a suggestion."""
+
+        on_click_handler = update_prompt(prompt) if update_prompt else None
+
+        return rx.button(
+            rx.cond(icon, rx.icon(icon), None),
+            prompt,
+            size="2",
+            variant="soft",
+            radius="large",
+            on_click=on_click_handler,
+            **props,
+        )
+
+    @staticmethod
+    def empty(
+        welcome_message: str,
+        **props,
+    ) -> rx.Component:
+        """Component to display when there are no messages."""
+        return rx.vstack(
+            rx.text(welcome_message, size="8", margin_bottom="0.5em"),
+            rx.cond(
+                ThreadState.has_suggestions,
+                rx.flex(
+                    rx.foreach(
+                        ThreadState.suggestions,
+                        lambda suggestion: Assistant.suggestion(
+                            prompt=suggestion.prompt,
+                            icon=suggestion.icon,
+                            update_prompt=ThreadState.update_prompt,
+                        ),
+                    ),
+                    spacing="4",
+                    width="100%",
+                    direction="row",
+                    wrap="wrap",
+                ),
+                None,
+            ),
+            **props,
+        )
+
+    @staticmethod
+    def messages(
+        **props,
+    ) -> rx.Component:
+        """Component to display messages in the thread."""
+
+        if ThreadState.messages is None:
+            messages = [Message(text="👋 Hi!", type=MessageType.ASSISTANT)]
+        else:
+            messages = ThreadState.messages
+
+        return rx.fragment(
+            mn.scroll_area.stateful(
+                rx.foreach(
+                    messages,
+                    lambda message: MessageComponent.render_message(message),
+                ),
+                rx.spacer(
+                    id="scroll-anchor",
+                    display="hidden",
+                    min_height="44px",
+                    wrap="nowrap",
+                ),
+                type="hover",
+                autoscroll=True,
+                show_controls=True,
+                controls="both",
+                top_button_text="↑",
+                bottom_button_text="↓",
+                offset_scrollbars=False,
+                scrollbars="y",
+                scrollbar_size="6px",
+                height="100%",
+                min_height="0",
+                **props,
+            ),
+        )
+
+    @staticmethod
+    def composer(
+        with_attachments: bool = False,
+        with_model_chooser: bool = False,
+        with_tools: bool = False,
+        with_clear: bool = True,
+        **props,
+    ) -> rx.Component:
+        return composer(
+            composer.input(),
+            rx.hstack(
+                rx.hstack(
+                    composer.choose_model(show=with_model_chooser),
+                ),
+                rx.hstack(
+                    composer.tools(
+                        show=with_tools and ThreadState.current_model_supports_tools
+                    ),
+                    composer.add_attachment(show=with_attachments),
+                    composer.clear(show=with_clear),
+                    composer.submit(),
+                    width="100%",
+                    justify="end",
+                    align="center",
+                    spacing="4",
+                ),
+                padding="0 12px 12px 12px",
+                width="100%",
+                align="center",
+            ),
+            on_submit=ThreadState.submit_message,
+            **props,
+        )
+
+    @staticmethod
+    def thread(
+        welcome_message: str = "",
+        with_attachments: bool = False,
+        with_clear: bool = True,
+        with_model_chooser: bool = True,
+        with_scroll_to_bottom: bool = False,
+        with_thread_list: bool = False,
+        with_tools: bool = False,
+        **props,
+    ) -> rx.Component:
+        # Note: avoid mutating state during component tree building
+        # Use ThreadState.set_suggestions() event handler to update suggestions
+        # if suggestions is not None:
+        #     ThreadState.set_suggestions(suggestions)
+
+        if with_thread_list:
+            ThreadState.with_thread_list = with_thread_list
+
+        return rx.flex(
+            rx.cond(
+                ThreadState.messages,
+                Assistant.messages(
+                    with_scroll_to_bottom=with_scroll_to_bottom,
+                    width="100%",
+                    margin_bottom="-1em",
+                    flex_grow=1,
+                    justify_content="start",
+                ),
+                Assistant.empty(
+                    welcome_message=welcome_message,
+                    width="100%",
+                    max_width="880px",
+                    margin_left="auto",
+                    margin_right="auto",
+                    margin_bottom="2em",
+                    flex_grow=1,
+                    justify_content="flex-end",
+                ),
+            ),
+            Assistant.composer(
+                with_attachments=with_attachments,
+                with_tools=with_tools,
+                with_model_chooser=with_model_chooser,
+                with_clear=with_clear,
+                # styling
+                border=rx.color_mode_cond(
+                    light=f"1px solid {rx.color('gray', 9)}",
+                    dark=f"1px solid {rx.color('white', 7, alpha=True)}",
+                ),
+                box_shadow=rx.color_mode_cond(
+                    light="0 1px 10px -0.5px rgba(0, 0, 0, 0.1)",
+                    dark="0 1px 10px -0.5px rgba(0.8, 0.8, 0.8, 0.1)",
+                ),
+                border_radius="10px",
+                background_color=rx.color_mode_cond(
+                    light=rx.color("white", 9, alpha=True),
+                    dark=rx.color("white", 2, alpha=False),
+                ),
+                width="100%",
+                max_width="880px",
+                margin_left="auto",
+                margin_right="auto",
+                margin_top="1em",
+                spacing="0",
+                flex_shrink=0,
+                z_index=1000,
+                on_mount=ThreadState.load_available_mcp_servers,
+            ),
+            **props,
+        )
+
+    @staticmethod
+    def thread_list(
+        *items,
+        with_footer: bool = False,
+        default_model: str | None = None,
+        **props,
+    ) -> rx.Component:
+        if default_model:
+            ThreadListState.default_model = default_model
+
+        return rx.flex(
+            rx.flex(
+                ThreadList.header(
+                    title="Neuer Chat",
+                    margin_bottom="1.5em",
+                    flex_shrink=0,
+                ),
+                ThreadList.list(
+                    flex_grow=1,
+                    min_height="60px",
+                ),
+                rx.cond(
+                    with_footer,
+                    ThreadList.footer(
+                        *items,
+                        flex_shrink=0,
+                        min_height="48px",
+                    ),
+                    None,
+                ),
+                flex_direction=["column"],
+                width="100%",
+                height="100%",
+                overflow="hidden",
+            ),
+            overflow="hidden",
+            **props,
+        )

appkit_assistant/components/threadlist.py

@@ -0,0 +1,134 @@
+import reflex as rx
+
+from appkit_assistant.state.thread_state import ThreadListState, ThreadModel
+
+
+class ThreadList:
+    @staticmethod
+    def header(title: str = "Neuer Chat", **props) -> rx.Component:
+        """Header component for the thread list."""
+        return rx.flex(
+            rx.tooltip(
+                rx.button(
+                    rx.text(title),
+                    size="2",
+                    margin_right="28px",
+                    on_click=ThreadListState.create_thread(),
+                    width="95%",
+                ),
+                content="Neuen Chat starten",
+            ),
+            direction="row",
+            align="center",
+            margin_top="9px",
+            **props,
+        )
+
+    @staticmethod
+    def footer(*items, **props) -> rx.Component:
+        """Footer component for the thread list."""
+        return rx.flex(
+            *items,
+            **props,
+        )
+
+    @staticmethod
+    def thread_list_item(thread: ThreadModel) -> rx.Component:
+        return rx.flex(
+            rx.text(
+                thread.title,
+                size="2",
+                white_space="nowrap",
+                overflow="hidden",
+                text_overflow="ellipsis",
+                flex_grow="1",
+                width="100px",
+                min_width="0",
+                title=thread.title,
+            ),
+            rx.tooltip(
+                rx.button(
+                    rx.icon(
+                        "trash",
+                        size=13,
+                        stroke_width=1.5,
+                    ),
+                    variant="ghost",
+                    size="1",
+                    margin_left="0px",
+                    margin_right="0px",
+                    color_scheme="gray",
+                    on_click=ThreadListState.delete_thread(thread.thread_id),
+                ),
+                content="Chat löschen",
+                flex_shrink=0,
+            ),
+            on_click=ThreadListState.select_thread(thread.thread_id),
+            flex_direction=["row"],
+            margin_right="10px",
+            margin_bottom="8px",
+            padding="6px",
+            align="center",
+            border_radius="8px",
+            background_color=rx.cond(
+                thread.active,
+                rx.color("accent", 3),
+                rx.color("gray", 3),
+            ),
+            border=rx.cond(
+                thread.active,
+                f"1px solid {rx.color('gray', 5)}",
+                "0",
+            ),
+            style={
+                "_hover": {
+                    "cursor": "pointer",
+                    "background_color": rx.cond(
+                        thread.active,
+                        rx.color("accent", 4),
+                        rx.color("gray", 6),
+                    ),
+                    "color": rx.cond(
+                        thread.active,
+                        rx.color("black", 9),
+                        rx.color("white", 9),
+                    ),
+                    "opacity": "1",
+                },
+                "opacity": rx.cond(
+                    thread.active,
+                    "1",
+                    "0.95",
+                ),
+            },
+        )
+
+    @staticmethod
+    def list(**props) -> rx.Component:
+        """List component for displaying threads."""
+        return rx.scroll_area(
+            rx.cond(
+                ThreadListState.has_threads,
+                rx.foreach(
+                    ThreadListState.threads,
+                    ThreadList.thread_list_item,
+                ),
+                rx.text(
+                    "Keine Chats vorhanden.",
+                    size="2",
+                    white_space="nowrap",
+                    overflow="hidden",
+                    text_overflow="ellipsis",
+                    flex_grow="1",
+                    min_width="0",
+                    margin_right="10px",
+                    margin_bottom="8px",
+                    padding="6px",
+                    align="center",
+                ),
+            ),
+            scrollbars="vertical",
+            padding_right="3px",
+            type="auto",
+            **props,
+        )