no version of taipy==4.0.0.dev2

[figoyouwei]

Hey,

I pip installed taipy==4.0.0 this morning, it works fine, but the chat icon doesn't work, then I tried to pip install taipy==4.0.0.dev2

It returns this now, how to solve?

No solution found when resolving dependencies
Because there is no version of taipy==4.0.0.dev2 and you require taipy==4.0.0.dev2, we can conclude that your requirements are unsatisfiable.

[AlexandreSajus]

Can you share the code that triggers the chat icon bug? Yes, we deleted the dev versions now that Taipy 4.0 has been released

[figoyouwei]

Sure, it is this one https://github.com/figoyouwei/taipy_success/blob/main/chatbot/pages/chat.py

Line 19: you define variable users Line 82: you use the variable

Please fix this, I have report in about 36 hours and I will put this for on for demo.

[AlexandreSajus]

What does not work? By chat icon, do you mean the avatar of the AI? I added the image in chatbot/icons/icon_ai.png and it does display the image I put:

[figoyouwei]

Yes, the icon image doesn't work with 4.0.0, I am seeing this. Are you running my code with v4.0.0?

[AlexandreSajus]

Yes I am running the code with a clean environment where I installed taipy 4.0.0. Can you make sure that the icon is in the right path?

[AlexandreSajus]

Here is where I put the image, then I ran main.py:

[figoyouwei]

ok, very strange I probably gonna re-tried this tomorrow, if still not working, we might need to have a meeting tomorrow night, ok?

[AlexandreSajus]

Okay, we can schedule a meeting if you want. When are you available?

[figoyouwei]

Let's see, so the same code works for taipy 4.0.0. That's your conclusion, right?

[AlexandreSajus]

Yes

[figoyouwei]

ok, I re-installed everything with pip. Right now by my end, the it displays AI icon, but not human icon. This is what I am seeing.

The code is confirmed and committed again, please check again, thanks.

[AlexandreSajus]

I asked R&D, and I'll get back to you as soon as possible. There was probably a CSS change between 4.0.0.dev2 and 4.0.0 on the chat control

[AlexandreSajus]

I found a fix, we added a show_sender argument to tgb.chat and we also changed some things with the CSS.

In pages/chat.py line 83:

tgb.chat(
        # Note: messages is actually the "var_name" in the evaluate function
        messages="{messages}",
        users=users,
        on_action=evaluate,
        sender_id="Human",
        show_sender=True,
        height="70vh",
    )

In main.css:

/* receiver order */
.taipy-chat-sent > .MuiGrid2-root > .MuiStack-root {
    flex-direction: row;
}
/* receiver avatar */
.taipy-chat-sent > .MuiGrid2-root > .MuiStack-root > .MuiBox-root {
    padding-top: 1em;
}

.taipy-chat-sent > .MuiStack-root > .MuiStack-root {
    margin-right: -44px;
}

.taipy-chat-sent > .MuiStack-root > .MuiStack-root > .MuiPaper-root {
    margin-right: 54px;
}

/* received avatar */
.taipy-chat-received > .MuiGrid2-root > .MuiStack-root > .MuiBox-root {
    padding-top: 1em;
}

/* received user name */
.taipy-chat-received .MuiStack-root .MuiStack-root .MuiBox-root {
    margin-left: -44px;
    padding-left: 0;
}

/* chat main frame */
.css-taa4w6 {
    color: rgb(255, 255, 255);
    box-shadow: var(--Paper-shadow);
    background-image: none;
    padding-top: 1.0em;
    padding-bottom: 1.0em;
    padding-left: 1.0em;
    padding-right: 1.0em;
    background-color: rgb(42, 57, 77);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

[figoyouwei]

Hey, the report was very successful today. So I will keep working on this project with Taipy, cheers.

I committed the latest code. Two minor issues:

1. Please display the "human" text variable above the icon as before.
2. Please align the bottom of chat box with the bottom of sidebar.

Then this session will be closed and let's have a meeting on Thursday:)

[figoyouwei]

Could I expect a solution by this week?

[AlexandreSajus]

Yes, I should be able to fix this this week

[AlexandreSajus]

Here you go:

In main.css:

.taipy-chat-sent > .MuiGrid2-root > .MuiStack-root {
    flex-direction: row;
}

.taipy-chat-sent > .MuiGrid2-root > .MuiStack-root > .MuiBox-root {
    padding-top: 1em;
}

.taipy-chat-sent > .MuiGrid2-root > .MuiStack-root > .MuiStack-root > .MuiBox-root {
    left: 35px;
    position: relative;
    padding-right:0;
    padding-left: 0;
}

.taipy-chat-sent > .MuiStack-root > .MuiStack-root {
    margin-right: -44px;
}

.taipy-chat-sent > .MuiStack-root > .MuiStack-root > .MuiPaper-root {
    margin-right: 54px;
}

.taipy-chat-received > .MuiGrid2-root > .MuiStack-root > .MuiBox-root {
    padding-top: 1em;
}

.taipy-chat-received .MuiStack-root .MuiStack-root .MuiBox-root {
    margin-left: -44px;
    padding-left: 0;
}

.taipy-part .p2 {
    padding-bottom: 0 !important;
}

/* chat main frame */
.css-taa4w6 {
    color: rgb(255, 255, 255);
    box-shadow: var(--Paper-shadow);
    background-image: none;
    padding-top: 1.0em;
    padding-bottom: 1.0em;
    padding-left: 1.0em;
    padding-right: 1.0em;
    background-color: rgb(42, 57, 77);
    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

[AlexandreSajus]

Hey, Youwei. I'm working on the auto-scrolling in the chat issue, but I can't isolate the problem. The chat element scrolls automatically in a simple application but not in yours. Could you provide a smaller version of the code with the problem of not scrolling automatically? Maybe a simpler example that does not use a langchain would be helpful. I can send this to R&D so they can take a look.