Answered

Power Apps

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

I make a One Application like Chat GPT and In these App the Database is a Custom Connector and In this Connection is Established Using API Key .Now I want to Make Application UI as Teams App Chatting Format . In this Application there are One Screen In these there are Mainly 5 Controls One Flex Gallery, One Text Input, One Icon, and In the Gallery I Inserted a Two Label .

Now Icon Onselect Property is This :-

Set(varResponse,ChatGPTConnector.ChatAPI("gpt-3.5-turbo",Collect(colChat,{role : "user", content : TextInput1.Text})));

Collect(colChat,First(varResponse.choices).message);

Reset(TextInput1) and Two Text Label have Text Property One have :- This Item.Role and other is This Item.content .Now I have Make this App UI as a Teams . I attached a Screenshot of Name Demo That I want and Other Screenshot with name What I HAve so Please Give me Proper Response

Categories:

Building Power Apps

All responses (9)

Answers (1)

Sort by

WiZey 3,023 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!
Hello @Anonymous ,

So you want to change the design of your app to look similar to Teams?

You already have a collection "colChat", so I guess you're using a gallery to display the answers.

Also, since you have two roles "user" and "assistant", have you tried adapting the style of the labels based on the item's role?

Fill: If(ThisItem.Role = "user"; Color.White; Color.Cyan)

What else, or actually what exactly do you need here?
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

No you don't Understand . I have to Make these App as A chatting Application similar like Teams .
WiZey 3,023 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

Ok, but I noticed you already have written the logic to send and receive data from ChatGPT. You also already have a collection and a gallery to display those queries and answers in a "chat-like" design, along with a text entry and a "submit" icon.

So far I could say you already have a chatting application.

If it's only about appearance, you can edit the "Color", "Fill", "Font", etc. properties to make it more "Teams-like".

I must ask again: What help do you need here?
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

I have to Change The Position of User and Their Question and Assistant and their Answer But the Problem is Between User and Assistant I use only one label and For Content question and answer I only used one label . I have to Represent this Conversation In Chatting Format .
WiZey 3,023 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!
Ah, so you aren't using a gallery as I first thought? My apologies.

I see your storing ChatGPT's answers in a collection "colChat". You can display this collection in a gallery for starters to show the answers.

But that's not all, you'll also need to:

Show user's inquery

Sort chat by date

First, you must decide on the collection's data structure. Something like this should suffice:

Column Type Value

User Text "user" or "assistant"

Date Datetime datetime of Collect()

Message Text Message to display

Populate your gallery with this collection, and insert two labels to display "ThisItem.User" and "ThisItem.Message". Use "Sort()" to sort the messages by date in descending order.

Now, you simply need to collect the users's query everytime he selects the "submit" icon like this:

Collect(colChat; {User:"user";Date:Now();Message:TextInput.Text});; //Call ChatGPTConnector... Collect(colChat: {User:"assistant";Date:Now;Message:ChatGPT.Answer});;

For the app's appearance, you'll only need to change the label's colors based on "ThisItem.User" to make them different if the message was from "user" or from "assistant".

Hope this was helpful to you.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

But I used the Custom Connector as a Database in this app. I create a Custom Connector Using API Key. so How Can I Do These
WiZey 3,023 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!
You're using this code to send, receive and store data from your connector:

Set(varResponse,ChatGPTConnector.ChatAPI("gpt-3.5-turbo",Collect(colChat,{role : "user", content : TextInput1.Text}))); Collect(colChat,First(varResponse.choices).message); Set(varResponse,ChatGPTConnector.ChatAPI //Stores the connector's return in a variable Collect(colChat,{role : "user", content : TextInput1.Text} //Stores the user's query in a collection Collect(colChat,First(varResponse.choices).message) //Stores the connector's answers in a collection

You're using the custom connector as a bridge, your database here would be the collection "colChat".

All you need to do is:

Add a gallery

Set gallery's "Items" property to "colChat"

Add two labels in the gallery to refer to "ThisItem.user" and "ThisItem.content" to display the user and the message

Set the gallery's "Default" property to "Last(colChat)" so the gallery will automatically display the last entry in the collection

This should be enough for the app to act like a chat.
Community Power Pla... Microsoft Employee on at

Like
a
(0)

Report
Copy link

Link copied!

My Problem is Solved Thank You My Friend
Verified answer

WiZey 3,023 Moderator on at

Like
a
(0)

Report
Copy link

Link copied!

The 4th point in my previous post already covered the autoscroll part for the gallery. Following the steps I provided should give you a gallery behaving like a chat.

Is anything in my suggestions not working as intended?