Message display method and device, electronic equipment and storage medium

Abstract

The application provides a message display method and device, electronic equipment and storage medium, wherein the method comprises the following steps: determining and generating a first message element corresponding to a message container according to the message content of the latest chat message in a target conversation; obtaining a second message element corresponding to a historical chat message before the latest chat message in the target conversation; determining and generating a placeholder element based on the first message element, the second message element and the attribute information of the message container; and arranging and rendering the message elements corresponding to each chat message in the message container in a top-down order according to the time stamp of each chat message in the target conversation in a reverse order, and arranging and rendering the placeholder element at the top of the message container. On the one hand, the target of the latest chat message can be displayed at the bottom of the message container, and on the other hand, the performance overhead caused by JavaScript operation of a document object model (DOM) does not need to be considered, thereby improving the performance of page rendering.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of terminals, and in particular to a message display method and device, electronic equipment and a storage medium. BACKGROUND

[0002] In some application scenarios of streaming text to a chat dialog box (for example, a large language model streaming text to a chat dialog box), it is necessary to display the latest chat message in the chat window. In related technologies, the DOM (Document Object Model) is operated by means of a JavaScript Web API (Application Programming Interface). This method can achieve the purpose of scrolling the chat page to the bottom to display the latest conversation (or chat) data.

[0003] However, when the large language model streams text, frequent invocation of the JavaScript method to operate the DOM will seriously affect the rendering performance of the page, and the page operation will be blocked when the page is scrolled. SUMMARY

[0004] The present application aims to at least partially solve one of the technical problems in the related art.

[0005] To this end, the first aspect of the present application is to provide a message display method.

[0006] The second aspect of the present application is to provide a message display device.

[0007] The third aspect of the present application is to provide electronic equipment.

[0008] The fourth aspect of the present application is to provide a non-transitory computer-readable storage medium.

[0009] The fifth aspect of the present application is to provide a computer program product.

[0010] To achieve the above-mentioned purpose, the first aspect of the present application provides a message display method, comprising:

[0011] According to the message content of the latest chat message in the target conversation, a corresponding first message element for layout to the message container is determined and generated; wherein the target conversation is a conversation opened by the user opening the chat page at any time;

[0012] Obtain the second message element corresponding to the historical chat message before the latest chat message in the target conversation;

[0013] determine and generate a placeholder element based on the first message element, the second message element and attribute information of the message container;

[0014] In descending order of time stamps of the chat messages in the target conversation, the message elements corresponding to the chat messages are sequentially laid out and rendered in the message container in a top-down order, and the placeholder element is laid out and rendered at the top of the message container.

[0015] To achieve the above object, the second aspect of the present application proposes a message display device, comprising:

[0016] A first determination module is configured to determine and generate a first message element corresponding to a latest chat message in a target conversation based on message content of the latest chat message; wherein the target conversation is a conversation opened by a user in response to opening a chat page;

[0017] A obtaining module is configured to obtain a second message element corresponding to a historical chat message before the latest chat message in the target conversation;

[0018] A second determination module is configured to determine and generate a placeholder element based on the first message element, the second message element and attribute information of the message container;

[0019] A first processing module is configured to sequentially lay out and render the message elements corresponding to the chat messages in the message container in a top-down order in descending order of time stamps of the chat messages in the target conversation, and lay out and render the placeholder element at the top of the message container.

[0020] To achieve the above object, the third aspect of the present application proposes an electronic device, comprising:

[0021] A processor and a memory connected with the processor in communication;

[0022] The memory stores computer execution instructions;

[0023] The processor executes the computer execution instructions stored in the memory to implement the message display method of the first aspect.

[0024] To achieve the above object, the fourth aspect of the present application proposes a non-transient computer readable storage medium storing computer instructions, the computer instructions being used to make a computer execute the message display method of the first aspect.

[0025] To achieve the above object, the fifth aspect of the present application proposes a computer program product comprising a computer program, the computer program being used to implement the message display method of the first aspect when executed by a processor.

[0026] The message display method of the present application determines and generates a first message element corresponding to the message content of the latest chat message in the target conversation, and arranges the first message element to a message container; wherein the target conversation is opened in response to the user opening the chat page once; obtains a second message element corresponding to the historical chat message before the latest chat message in the target conversation; determines and generates a placeholder element based on the first message element, the second message element and the attribute information of the message container; and arranges and renders the message elements corresponding to each chat message in the target conversation in the message container in the order from bottom to top according to the descending order of the time stamp of each chat message, and arranges and renders the placeholder element at the top of the message container. Thus, without using JavaScript method, but using pure CSS (Cascading Style Sheets, Cascading Style Sheets) attribute, the target of displaying the latest chat message at the bottom of the message container can be realized, without considering the performance overhead caused by JavaScript operation DOM, and the performance of page rendering is improved.

[0027] Additional aspects and advantages of the present application will be made apparent by the following description and the accompanying drawings. BRIEF DESCRIPTION OF DRAWINGS

[0028] The above and / or additional aspects and advantages of the present application will become apparent and be readily understood from the following description, taken in conjunction with the accompanying drawings, in which:

[0029] Figure 1 A flowchart of a message display method provided by an embodiment of the present application;

[0030] Figure 2 A chat page provided by the present application;

[0031] Figure 3 A flowchart of a message display method provided by another embodiment of the present application;

[0032] Figure 4 A flowchart of a message display method provided by another embodiment of the present application;

[0033] Figure 5 Another chat page provided by the present application;

[0034] Figure 6 A structural diagram of a message display device provided by another embodiment of the present application;

[0035] Figure 7 A structural diagram of an electronic device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0036] Embodiments of the present application are described in detail below with reference to the accompanying drawings, in which the same or like reference numerals in different drawings denote the same or like elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to explain the present application, and cannot be understood as limiting the present application.

[0037] It should be noted that the acquisition, transmission, storage, use, processing, etc. of data (including but not limited to user equipment information, user personal information, etc.) in the technical solutions of the present application comply with relevant provisions of relevant laws and regulations.

[0038] In the related art, when a large language model outputs text in a streaming manner, the following method is generally adopted to automatically scroll the message container to the bottom of the viewport:

[0039] After rendering the corresponding text in the webpage viewport, if a scroll bar appears in the webpage viewport, a JavaScript script is executed to control the scroll bar to be pulled down to the bottom, thereby realizing the effect of scrolling the entire viewport to the bottom.

[0040] Among them, the control of the scroll bar is realized by operating the scrollTop attribute of the element or using the scrollY attribute of the window object, so the Web APIs such as scrollIntoView, setScrollTop will be used or the values of the scrollTop and scrollY attributes will be directly changed to realize the control of the scroll bar.

[0041] The above-mentioned method has the following disadvantages for automatically scrolling to the bottom of the viewport:

[0042] 1. During the period when the model outputs a piece of text, a large number of JavaScript script operations are executed, and since JavaScript is single-threaded, the execution of the JavaScript script will block other page events.

[0043] 2. After the appearance of the scroll bar in the viewport, the JavaScript script pulls the scroll bar to the bottom of the viewport, which is a JavaScript direct operation on the DOM element event, and this will consume the rendering performance of the browser.

[0044] A message display method, device, electronic equipment and storage medium are described below with reference to the accompanying drawings.

[0045] Figure 1 A flowchart of a message display method provided by an embodiment of the present application.

[0046] The message display method is configured in a message display device, which can be applied to any electronic device to enable the electronic device to perform a message display function.

[0047] The electronic device can be any device with computing capability, such as a personal computer, a mobile terminal, a server, and the like. The mobile terminal can be a mobile phone, a tablet computer, a personal digital assistant, a wearable device, and the like, which has various operating systems, touch screens, and / or display screens.

[0048] As shown in Figure 1 The method includes the following steps:

[0049] In step 101, a first message element corresponding to a latest chat message in a target conversation is determined and generated according to message content of the latest chat message.

[0050] The target conversation is opened in response to a user opening a chat page.

[0051] The message content can include, but is not limited to, text, emoticons, links, pictures, and the like, which is not limited in the present application.

[0052] In the embodiment of the present application, the attribute information of the first message element, such as size and style, can be determined according to the message content of the latest chat message in the target conversation, and the message content of the latest chat message can be filled into the first message element based on the attribute information of the first message element, so as to complete the generation of the first message element.

[0053] In step 102, a second message element corresponding to a historical chat message before the latest chat message in the target conversation is obtained.

[0054] It can be understood that there can be historical chat messages before the latest chat message in the target conversation. It should be noted that the number of historical chat messages is not limited in the present application.

[0055] In the embodiment of the present application, the second message element corresponding to the historical chat message before the latest chat message in the target conversation can be obtained.

[0056] As an example, similar to the method of generating the first message element corresponding to the latest chat message, the second message element of the historical chat message can be determined and generated according to the message content of the historical chat message before the latest chat message in the target conversation, and the second message element can be saved, so that in subsequent applications, the second message element can be directly obtained from the saved message element. Thus, the second message element of the historical chat message can be quickly accessed.

[0057] In one possible implementation of this application embodiment, after generating the first message element corresponding to the latest chat message, it can be determined whether there are historical chat messages in the target dialogue before the latest chat message. Then, if there are historical chat messages, the second message element corresponding to the historical chat messages before the latest chat message in the target dialogue can be obtained.

[0058] Step 103: Based on the attribute information of the first message element, the second message element, and the message container, determine and generate placeholder elements.

[0059] Optionally, the message container's attribute information may include the message displayable height and message displayable width of the message container.

[0060] It should also be noted that the message container's attribute information may include other attributes, and this application does not impose any restrictions on this.

[0061] In this embodiment of the application, the placeholder element is used to indicate the message content of the chat message that does not contain the target dialogue; for example, the placeholder element can be a blank element; or it can be an element that contains messages other than the message content of the chat message in the target dialogue, such as promotional information, prompt information, etc.

[0062] Understandably, the attribute information of the placeholder element (such as size and style) can be determined based on the attribute information of the first message element, the second message element, and the message container, so that the placeholder element can be generated based on the attribute information of the placeholder element.

[0063] It is understandable that there may be situations where the target conversation does not contain any historical chat messages. Therefore, in one possible implementation of this application embodiment, in the absence of historical chat messages, a placeholder element can be determined and generated based on the attribute information of the first message element and the message container.

[0064] Step 104: Arrange and render the message elements corresponding to each chat message in the message container in descending order of the timestamps of each chat message in the target dialogue, and arrange and render placeholder elements at the top of the message container.

[0065] In the embodiments of this application, each chat message in the target dialogue may include the latest chat message and historical chat messages. It is understood that each chat message in the target dialogue may have a corresponding timestamp.

[0066] In this embodiment of the application, the message elements corresponding to each chat message are laid out and rendered in the message container in descending order of the timestamps of each chat message in the target dialogue, and placeholder elements are laid out and rendered at the top of the message container.

[0067] For example, assuming that the historical chat messages included in the target conversation include message 1 and message 2, the latest chat message is message 3, and the ordering of each chat message is message 3, message 2, and message 1 in the reverse order of the timestamps of the chat messages, the message element corresponding to message 3, the message element corresponding to message 2, and the message element corresponding to message 1 are sequentially laid out and rendered in the message container in the order from bottom to top, and the placeholder element is laid out and rendered at the top of the message container (i.e., the upper part of the message element corresponding to message 1), as shown in the chat page obtained according to the above manner. Figure 2

[0068] The message display method provided in the embodiments of the present application determines and generates a first message element corresponding to the latest chat message in the target conversation according to the message content of the latest chat message, wherein the target conversation is a conversation opened in response to the user opening the chat page once; obtains a second message element corresponding to a historical chat message before the latest chat message in the target conversation; determines and generates a placeholder element based on the first message element, the second message element, and attribute information of the message container; and sequentially lays out and renders each chat message element in the message container in the order from bottom to top according to the reverse order of the timestamps of the chat messages in the target conversation, and lays out and renders the placeholder element at the top of the message container. Thus, the latest chat message in the target conversation can be displayed at the bottom of the message container without using JavaScript methods, but using pure CSS (Cascading Style Sheets) attributes, without considering the performance overhead caused by JavaScript operation on DOM, thereby improving the performance of page rendering.

[0069] To clearly illustrate how the placeholder element is determined and generated based on the first message element, the second message element, and the attribute information of the message container in the above embodiments of the present application, the present application further provides a message display method.

[0070] Figure 3 A flowchart of a message display method provided by another embodiment of the present application.

[0071] As shown in Figure 3 , the method comprises the following steps:

[0072] In step 301, a first message element used for layout in a message container is determined and generated according to the text content of the latest chat message in a target conversation.

[0073] In step 302, a second message element corresponding to a historical chat message before the latest chat message in the target conversation is obtained.

[0074] ​It should be noted that the execution process of steps 301 to 302 can refer to the execution process of any embodiment of the present application, which will not be repeated here.

[0075] Step 303, determining the target height according to the height of the first message element and the height of the second message element.

[0076] As an example, the height of the first message element and the height of the second message element are added to obtain the target height.

[0077] Step 304, comparing the target height with the message displayable height of the message container to determine whether to generate the placeholder element based on the comparison result.

[0078] In the embodiments of the present application, the target height and the message displayable height of the message container can be compared to obtain the comparison result, so that whether to generate the placeholder element can be determined based on the comparison result.

[0079] As a possible implementation, when the comparison result indicates that the target height is less than the message displayable height of the message container, it is determined to generate the placeholder element. It should be noted that when the comparison result indicates that the target height is less than the message displayable height of the message container, it indicates that the message container has an area that can be used to layout the placeholder element, and therefore, it is determined to generate the placeholder element, so that the subsequent elements can be directly laid out in the message container in order through the generated placeholder element, without consuming computing resources to design the layout position of each element in the message container.

[0080] In another possible implementation of the embodiments of the present application, when the comparison result indicates that the target height is not less than the message displayable height of the message container, it is determined not to generate the placeholder element. It should be noted that when the comparison result indicates that the target height is not less than the message displayable height of the message container, it indicates that the message container does not have an area that can be used to layout the placeholder element, and therefore, it is determined not to generate the placeholder element.

[0081] Step 305, in the case of determining to generate the placeholder element, determining the first height based on the target height and the message displayable height of the message container.

[0082] As an example, in the case of determining to generate the placeholder element, the difference between the message displayable height of the message container and the target height can be determined as the first height.

[0083] Step 306, determining the first size according to the first height and the message displayable width of the message container.

[0084] As an example, the first height is determined as the height in the first size, and the message displayable height of the message container is determined as the width in the first size.

[0085] As another example, the first height is determined as a height in the first size; and a width in the first size is determined based on the message displayable height of the message container and the set page margin.

[0086] At step 307, the placeholder element is generated according to the first size.

[0087] In the embodiments of the present application, after the first size is determined, the placeholder element with the first size can be generated according to the first size.

[0088] At step 308, the message elements corresponding to the chat messages in the target conversation are sequentially laid out and rendered in the message container in a top-down order according to the reverse chronological order of the timestamps of the chat messages in the target conversation, and the placeholder element is laid out and rendered at the top of the message container.

[0089] It should be noted that the execution process of step 308 can refer to the execution process of any of the embodiments of the present application, which will not be described here.

[0090] In a possible implementation manner of the embodiments of the present application, when the height of the first message element is greater than the message displayable height of the message container or the target height is not less than the message displayable height of the message container, the message elements corresponding to the chat messages in the target conversation can be sequentially laid out in the message container in a top-down order according to the reverse chronological order of the timestamps of the chat messages in the target conversation; the visible part and the invisible part in the message element corresponding to each chat message are determined based on the message displayable height of the message container and the height of the message element corresponding to each chat message; and finally, the visible part can be rendered in the message container and the invisible part can be hidden.

[0091] In this way, the visible part and the invisible part in the message element corresponding to each chat message in the target conversation can be effectively determined, so that the chat messages can be efficiently displayed in the limited message container.

[0092] It should be noted that when the height of the first message element is greater than the message displayable height of the message container or the target height is not less than the message displayable height of the message container, it can be determined that the placeholder element is not generated, and the message elements corresponding to the chat messages in the target conversation can be sequentially laid out in the message container in a top-down order according to the reverse chronological order of the timestamps of the chat messages in the target conversation.

[0093] Since there can be a hidden part, in order to facilitate the complete chat messages of the target conversation to be obtained, further, in a possible implementation manner of the embodiments of the present application, the height of the first message element is greater than the message displayable height of the message container or the target height is greater than the message displayable height of the message container, a scroll bar element is generated, and the scroll bar element is laid out and rendered based on the value of the set scroll distance.

[0094] The scroll distance is set to 0, for example, so that the latest chat message is displayed at the bottom of the message container.

[0095] Thus, the scroll bar is used to listen to the scroll event to implement dynamic loading and dynamic adjustment of the message content.

[0096] The message display method provided by the embodiment of the present application determines the target height according to the height of the first message element and the height of the second message element, compares the target height with the message displayable height of the message container, determines whether to generate the placeholder element based on the comparison result, determines the first height based on the target height and the message displayable height of the message container in the case of determining to generate the placeholder element, determines the first size according to the first height and the message displayable width of the message container, and generates the placeholder element according to the first size. Thus, whether to generate the placeholder element can be effectively determined based on the height of the message element corresponding to each chat message in the target conversation and the attribute information of the message container, so that the generation of the placeholder element is implemented in the case of determining to generate the placeholder element.

[0097] To clearly illustrate how the first message element corresponding to the latest chat message in the target conversation is determined and generated based on the text content of the latest chat message in the target conversation in any embodiment of the present application, the present application further provides a message display method.

[0098] Figure 4 A flowchart of a message display method provided by another embodiment of the present application.

[0099] As shown in FIG. 4, the method comprises the following steps: Figure 4

[0100] Step 401: Obtain the height and byte number of a message that can be displayed in one row of the message container.

[0101] Step 402: Determine the number of rows occupied by the text content of the latest chat message based on the text content of the latest chat message in the target conversation and the byte number of a message that can be displayed in one row of the message container.

[0102] As an example, in the case where the text content of the latest chat message in the target conversation does not contain a multi-level title, the total byte amount corresponding to the latest chat message is determined according to the text content of the minimum chat message, and the number of rows occupied by the text content of the latest chat message is determined according to the total byte amount corresponding to the latest chat message and the byte number of a message that can be displayed in one row of the message container.

[0103] ​As another example, in a case where the text content of the latest chat message in the target conversation contains multiple levels of titles, the number of title lines is determined according to the number of titles contained in the text content of the latest chat message; for any text paragraph in the text content of the latest chat message, the total number of bytes corresponding to the text paragraph is determined, and the number of lines occupied by the text paragraph is determined based on the total number of bytes corresponding to the text paragraph and the number of bytes of a message that can be displayed by a line of the message container; finally, the number of lines occupied by each text paragraph and the number of title lines are summed to obtain the target number of lines, which is taken as the number of lines occupied by the text content of the latest chat message.

[0104] Step 403: determining the target size according to the height of a line of the message container, the number of lines occupied by the text content of the latest chat message, and the message displayable width of the message container.

[0105] As an example, the height of a line of the message container and the number of lines occupied by the text content of the latest chat message are multiplied to obtain a first height; the first height and the message displayable width of the message container are taken as the target size.

[0106] Step 404: generating a first message element based on the text content of the latest chat message and the target size.

[0107] Thus, the size of the generated first message element can be the target size, and the content filled in the first message element is the text content of the latest chat message.

[0108] Step 405: obtaining a second message element corresponding to a historical chat message before the latest chat message in the target conversation.

[0109] Step 406: determining and generating a placeholder element based on the first message element, the second message element, and the attribute information of the message container.

[0110] Step 407: arranging and rendering, in the message container, the message elements corresponding to the chat messages in the target conversation in a top-down order according to the descending order of the time stamps of the chat messages, and arranging and rendering the placeholder element at the top of the message container.

[0111] It should be noted that the execution process of steps 405 to 407 can refer to the execution process of any embodiment of the present application, which will not be repeated here.

[0112] The message display method of the embodiment of the present application can display the height and byte number of a message in a message container row, determine the number of rows occupied by the text content of the latest chat message in the target conversation based on the text content of the latest chat message and the byte number of the message in the message container row, determine the target size based on the height of the message container row, the number of rows occupied by the text content of the latest chat message and the width of the message container, and generate the first message element based on the text content of the latest chat message and the target size. Thus, the height and byte number of the message in the message container row can be used to determine and generate the first message element in the layout to the message container.

[0113] To clearly illustrate the message display method of the present application, examples are described in detail below

[0114] As an example, the message display method of the present application can include the following steps:

[0115] 1. Set the message container as “flexible layout”, wherein the height of the message container is fixed, the vertical overflow is set as scrolling, and the layout direction of the elements in the message container included in the message container is set as vertical and arranged from bottom to top.

[0116] 2. Add an adaptive height module (marked as a placeholder element in the present application) to the message container.

[0117] Thus, a flexible height container is defined, wherein the flexible height container includes two sub-elements, i.e., the message container and the adaptive height module (marked as a placeholder element in the present application).

[0118] 3. Store the chat messages in the target conversation in a message array in the chronological order of the timestamps of the chat messages.

[0119] For example, the chat messages in the target conversation are sorted in the chronological order of the timestamps of the chat messages as message 1, message 2, …, message n, then “message 1” is stored at the head of the message array, “message 2” is stored at the head of the message array to form the array [“message 1”, “message 2”], and the message array is formed as [“message 1”, “message 2”, …, “message n”] in this way.

[0120] 4. Bind the message array with the message elements in the message container.

[0121] Specifically, the message elements corresponding to the number of array elements in the message array are generated, and “message n”, “message n-1”, …, “message 1” are rendered in the message container from bottom to top in sequence.

[0122] It should be noted that when the message elements are not enough, the height adaptive module fills the message container together with the message elements, at this time, no vertical scroll bar is arranged in the message container layout, as shown in Figure 2 ; when the message elements are enough, the height of the height adaptive module is compressed to 0, at this time, the sum of the heights of the message elements, i.e. the target height, is greater than or equal to the message displayable height of the message container, at this time, the vertical scroll bar is arranged in the message container layout, as shown in Figure 5 .

[0123] When the vertical scroll bar is arranged in the message container layout, the vertical scroll distance of the vertical scroll bar is set to 0, so that the latest chat message is always displayed at the bottom of the message container.

[0124] The message display method of the present application can construct a non-blocking web chat dialog box, the latest chat message of the dialog box can be always displayed at the bottom of the message container, and the method does not use JavaScript scripts, and does not cause the problem of frequent execution of JavaScript scripts, so as to improve the page performance and rendering efficiency.

[0125] Corresponding to the message display method provided by the above Figures 1 to 4 embodiments, the present application further provides a message display device, since the message display device provided by the embodiments of the present application corresponds to the message display method provided by the above Figures 1 to 4 embodiments, the implementation of the message display method is also applicable to the message display device provided by the embodiments of the present application, which will not be described in detail in the embodiments of the present application.

[0126] Figure 6 A structural schematic diagram of a message display device provided by another embodiment of the present application.

[0127] As shown in Figure 6 , the message display device 600 can include a first determination module 601, an acquisition module 602, a second determination module 603 and a first processing module 604.

[0128] The first determination module 601 is configured to determine and generate a first message element corresponding to the latest chat message in the target conversation according to the message content of the latest chat message; wherein the target conversation is a conversation opened by the user in response to opening the chat page.

[0129] The acquisition module 602 is configured to acquire a second message element corresponding to a historical chat message before the latest chat message in the target conversation.

[0130] The second determination module 603 is configured to determine and generate a placeholder element based on the first message element, the second message element and the attribute information of the message container.

[0131] The first processing module 604 is configured to, in a descending order of time stamps of the chat messages in the target conversation, sequentially arrange and render the message elements corresponding to the chat messages in the message container in a top-down order, and arrange and render the placeholder element at the top of the message container.

[0132] In a possible implementation of the embodiments of the present application, the attribute information of the message container includes a message displayable height and a message displayable width of the message container; the second determining module 603 is configured to: determine a target height according to the height of the first message element and the height of the second message element; compare the target height with the message displayable height of the message container, to determine whether to generate the placeholder element based on a comparison result; and in a case where it is determined to generate the placeholder element, determine a first height based on the target height and the message displayable height of the message container, determine a first size according to the first height and the message displayable width of the message container, and generate the placeholder element according to the first size.

[0133] In a possible implementation of the embodiments of the present application, the second determining module 603 is configured to: in response to the comparison result indicating that the target height is less than the message displayable height of the message container, determine that the placeholder element needs to be generated.

[0134] In a possible implementation of the embodiments of the present application, the message display device 600 can further include:

[0135] The third determining module is configured to, in response to the comparison result indicating that the target height is not less than the message displayable height of the message container, determine that the placeholder element does not need to be generated.

[0136] In a possible implementation of the embodiments of the present application, the message display device 600 can further include:

[0137] The arranging module is configured to, in response to the height of the first message element being greater than the message displayable height of the message container, or the target height not being less than the message displayable height of the message container, sequentially arrange the message elements corresponding to the chat messages in the message container in a descending order of time stamps of the chat messages in the target conversation.

[0138] The fourth determining module is configured to determine a visible part and an invisible part in the message element corresponding to each chat message based on the message displayable height of the message container and the height of the message element corresponding to each chat message.

[0139] The second processing module is configured to render the visible part in the message container and hide the invisible part.

[0140] In a possible implementation of the embodiments of the present application, the message display device 600 can further include:

[0141] The generating module is configured to generate a scroll bar element in response to the height of the first message element being greater than a message displayable height of the message container, or the target height being greater than the message displayable height of the message container.

[0142] The third processing module is configured to layout and render the scroll bar element based on the value of the set scroll distance.

[0143] In a possible implementation of the embodiments of the present application, the first determining module 601 is configured to: obtain a height and a byte number of a message displayable by a row of the message container; determine a number of rows occupied by the message content of the latest chat message in the target conversation based on the message content of the latest chat message and the byte number of the message displayable by a row of the message container; determine the target size according to the height of a row of the message container, the number of rows occupied by the message content of the latest chat message, and a message displayable width of the message container; and generate the first message element based on the message content of the latest chat message and the target size.

[0144] The message display apparatus according to the embodiments of the present application determines and generates the corresponding first message element for layout into the message container according to the message content of the latest chat message in the target conversation, wherein the target conversation is a conversation opened in response to any time that the user opens the chat page; obtains the second message element corresponding to the historical chat message before the latest chat message in the target conversation; determines and generates the placeholder element based on the first message element, the second message element, and the attribute information of the message container; and layouts and renders the message elements corresponding to the chat messages in the target conversation in the message container in a top-down order according to the descending order of the time stamps of the chat messages, and layouts and renders the placeholder element at the top of the message container. Thus, without using the JavaScript method, but using the pure CSS (Cascading Style Sheets) attribute, the target of displaying the latest chat message at the bottom of the message container can be achieved, without considering the performance overhead caused by the JavaScript operation on the DOM, thereby improving the performance of page rendering.

[0145] Figure 7 A structural diagram of an electronic device is provided for another embodiment of the present application. The electronic device 700 in the embodiment is intended to represent various forms of digital computers, such as laptops, desktops, tablets, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown here, their connections and relationships, and their functions, are meant to be examples only, and are not intended to limit the implementations of the present application described and / or claimed in this document.

[0146] As Figure 7 shown, the electronic device 700 includes a memory 710, a processor 720, and computer instructions stored on the memory 710 and executable on the processor 720.

[0147] The processor 720 implements the message display method provided in the above embodiments when executing the instructions.

[0148] Further, the electronic device 700 further includes:

[0149] a communication interface 730 for communication between the memory 710 and the processor 720.

[0150] The memory 710 is configured to store computer instructions executable on the processor 720.

[0151] The memory 710 can include a high-speed RAM memory, and can also include a non-volatile memory, such as at least one disk memory.

[0152] The processor 720 is configured to implement the message display method of the above embodiments when executing the program.

[0153] If the memory 710, the processor 720 and the communication interface 730 are implemented independently, the communication interface 730, the memory 710 and the processor 720 can be connected to each other through a bus and complete communication between each other. The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 7 only one thick line is used in the figure, but it does not mean that there is only one bus or only one type of bus.

[0154] Alternatively, in specific implementation, if the memory 710, the processor 720 and the communication interface 730 are integrated on a chip, the memory 710, the processor 720 and the communication interface 730 can complete communication between each other through an internal interface.

[0155] The processor 720 may be a central processing unit (CPU), an application specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of this application.

[0156] To implement the above embodiments, this application also proposes a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the aforementioned methods.

[0157] To implement the above embodiments, this application also proposes a computer program product, including a computer program that implements the aforementioned method when executed by a processor.

[0158] In the description of this specification, the references to terms such as "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0159] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "multiple" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0160] Any process or method description in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.

[0161] The logic and / or steps represented in the flowcharts and / or described herein, for example, can be considered as a sequence of executable instructions stored in a computer readable medium, which can be executed by an instruction execution system, apparatus or device, such as a computer-based system, processor- based system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions, or a combination thereof. For the purposes of this specification, a "computer readable medium" can be any apparatus that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. The computer readable medium can specifically include the following, which are non-exhaustive list: electrical connection (electrical device having one or more wires), portable computer diskette (magnetic device), random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or Flash memory), optical fiber device, and portable compact disc read-only memory (CDROM). In addition, the computer readable medium can even be paper or other suitable medium upon which the program is printed, as the program can be electronically captured, for example, by optically scanning the paper or other suitable medium, then electronically converted into a form that can be edited, compiled, or interpreted, or otherwise processed in electronic form into an executable form suitable for use in the instruction execution system, apparatus or device.

[0162] It should be understood that parts of the present application can be implemented in hardware, software, firmware or a combination thereof. In the above embodiments, a plurality of steps or methods can be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. As in another embodiment, if implemented in hardware, any of the following technologies known in the art or their combination can be used: discrete logic circuit with logic gate circuit for implementing logic functions on data signals, application specific integrated circuit with suitable combination logic gate circuit, programmable gate array (PGA), field programmable gate array (FPGA), etc.

[0163] Those skilled in the art of the present technology can understand that all or part of the steps carried out by the above-mentioned embodiment method can be completed by a program instructing the relevant hardware, and the program can be stored in a computer readable storage medium. When the program is executed, it includes one of the steps of the method embodiment or a combination thereof.

[0164] In addition, each function unit in each embodiment of the present application can be integrated in one processing module, or each unit can be physically present separately, or two or more units can be integrated in one module. The integrated module can be realized in the form of hardware or in the form of a software function module. When the integrated module is realized in the form of a software function module and sold or used as an independent product, it can also be stored in a computer readable storage medium. The storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0165] It should be noted that in the embodiments of the present application, some software, components, models and the like in the industry are mentioned, which should be considered as exemplary, and the purpose is only to illustrate the feasibility of the implementation of the technical solutions of the present application, but it does not mean that the applicant has or will necessarily use the scheme.

[0166] Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limiting the present application, and those skilled in the art can make changes, modifications, replacements and modifications to the above embodiments within the scope of the present application.

Claims

1. A message presentation method, characterized by, The method comprises: determining and generating a first message element corresponding to a latest chat message in a target conversation according to message content of the latest chat message, wherein the target conversation is a conversation opened in response to a user opening a chat page once; obtaining a second message element corresponding to a historical chat message before the latest chat message in the target conversation; determining and generating a placeholder element based on the first message element, the second message element and attribute information of the message container, wherein the attribute information of the message container comprises a message displayable height and a message displayable width of the message container; arranging and rendering the message elements corresponding to each chat message in the message container in a top-down order according to a reverse chronological order of the timestamps of the chat messages in the target conversation, and arranging and rendering the placeholder element at the top of the message container; wherein the determining and generating of the placeholder element based on the first message element, the second message element and the attribute information of the message container comprises: determining a target height according to the height of the first message element and the height of the second message element; comparing the target height with the message displayable height of the message container to determine whether to generate the placeholder element based on the comparison result; in a case where it is determined to generate the placeholder element, determining a first height based on the target height and the message displayable height of the message container; determining a first size according to the first height and the message displayable width of the message container; generating the placeholder element according to the first size.

2. The method of claim 1, wherein, The determining whether to generate the placeholder element based on the comparison result comprises: in response to the comparison result indicating that the target height is less than the message displayable height of the message container, determining to generate the placeholder element.

3. The method of claim 1, wherein, The method further comprises: in response to the comparison result indicating that the target height is not less than the message displayable height of the message container, determining not to generate the placeholder element.

4. The method of claim 1, wherein, The method further comprises: in response to the height of the first message element being greater than the message displayable height of the message container, or the target height being not less than the message displayable height of the message container, arranging the message elements corresponding to each chat message in the message container in a top-down order according to a reverse chronological order of the timestamps of the chat messages in the target conversation; determining a visible part and an invisible part in the message element corresponding to each chat message based on the message displayable height of the message container and the height of the message element corresponding to each chat message; rendering the visible part in the message container and hiding the invisible part.

5. The method of claim 4, wherein, The method further comprises: in response to the height of the first message element being greater than the message displayable height of the message container, or the target height being greater than the message displayable height of the message container, generating a scroll bar element; arranging and rendering the scroll bar element based on the value of the set scroll distance.

6. The method according to any one of claims 1 to 5, characterized in that, The determining and generating of the first message element corresponding to the latest chat message in the target conversation according to the message content of the latest chat message comprises: obtaining a height and a byte number of a message that can be displayed by one row of the message container; determining a number of rows occupied by the message content of the latest chat message based on the message content of the latest chat message in the target conversation and the byte number of the message that can be displayed by one row of the message container; determining a target size according to the height of the message container, the number of rows occupied by the message content of the latest chat message, and the message displayable width of the message container; generating the first message element based on the message content of the latest chat message and the target size.

7. A message display device, characterized by The apparatus comprises: a first determination module configured to determine and generate a first message element corresponding to a latest chat message in a target conversation according to the message content of the latest chat message; wherein the target conversation is opened in response to a user opening a chat page once; an obtaining module configured to obtain a second message element corresponding to a historical chat message before the latest chat message in the target conversation; a second determination module configured to determine and generate a placeholder element based on the first message element, the second message element, and attribute information of the message container; wherein the attribute information of the message container comprises a message displayable height and a message displayable width of the message container; a first processing module configured to arrange and render, in the message container, the message elements corresponding to the chat messages in the target conversation in a descending order of time stamps of the chat messages from bottom to top, and arrange and render the placeholder element at the top of the message container; wherein the second determination module is configured to: determine a target height according to a height of the first message element and a height of the second message element; compare the target height with the message displayable height of the message container to determine whether to generate the placeholder element based on a comparison result; in a case where it is determined to generate the placeholder element, determine a first height based on the target height and the message displayable height of the message container; determine a first size according to the first height and the message displayable width of the message container; and generate the placeholder element according to the first size.

8. The apparatus of claim 7, wherein, The second determination module is configured to: determine that the placeholder element needs to be generated in response to the comparison result indicating that the target height is less than the message displayable height of the message container.

9. The apparatus of claim 7, wherein, The apparatus further comprises: a third determination module configured to determine that the placeholder element does not need to be generated in response to the comparison result indicating that the target height is not less than the message displayable height of the message container.

10. The apparatus of claim 7, wherein, The apparatus further comprises: a layout module configured to arrange, in the message container, the message elements corresponding to the chat messages in the target conversation in a descending order of time stamps of the chat messages from bottom to top in response to the height of the first message element being greater than the message displayable height of the message container, or the target height not being less than the message displayable height of the message container. The fourth determining module is configured to determine a visible part and an invisible part in each message element corresponding to the chat messages based on a message displayable height of the message container and a height of each message element corresponding to the chat messages. The second processing module is configured to render the visible part and hide the invisible part in the message container.

11. The apparatus of claim 10, wherein, The device further includes: The generating module is configured to generate a scroll bar element in response to the height of the first message element being greater than the message displayable height of the message container or the target height being greater than the message displayable height of the message container. The third processing module is configured to layout and render the scroll bar element based on a value of the set scroll distance.

12. The apparatus of any one of claims 7-11, wherein, The first determining module is configured to: obtain a height and a byte number of a message displayable in one line of the message container; determine a number of lines occupied by the message content of the latest chat message in the target conversation based on the message content of the latest chat message and the byte number of the message displayable in one line of the message container; determine a target size according to the height of one line of the message container, the number of lines occupied by the message content of the latest chat message, and a message displayable width of the message container; generate the first message element based on the message content of the latest chat message and the target size.

13. An electronic device, comprising: The device includes: a processor, and a memory connected to the processor in communication; the memory stores computer execution instructions; the processor executes the computer execution instructions stored in the memory to implement the method in any one of claims 1-6.

14. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer execution instructions, and the computer execution instructions are executed by the processor to implement the method in any one of claims 1-6.

15. A computer program product, characterised in that, The computer program is executed by the processor to implement the method in any one of claims 1-6.

Images