Message display method and device, electronic equipment and storage medium

Abstract

The invention provides a message display method and device, electronic equipment and a storage medium, and the method comprises the steps: determining and generating a corresponding first message element used for being distributed to a message container according to the message content of a latest chat message in a target conversation; acquiring a second message element corresponding to a historical chat message before the latest chat message in the target dialogue; determining and generating a placeholder element based on the attribute information of the first message element, the second message element and the message container; and according to the reverse order of the timestamps of the chat messages in the target dialogue, sequentially arranging and rendering message elements corresponding to the chat messages from bottom to top in the message container, and arranging and rendering placeholder elements at the top of the message container. On one hand, the aim of displaying the latest chat message at the bottom of the message container can be achieved, and on the other hand, the performance overhead brought by a DOM (Document Object Model) operated by JavaScript does not need to be considered, and the page rendering performance is improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a message display method, device, electronic device and storage medium. Background Art

[0002] In some application scenarios of streaming text output to a chat dialog box (for example, a large language model streaming text output to a chat dialog box), it is necessary to display the latest chat message in the chat window. In the related technology, DOM (Document Object Model) operations are performed with the help of JavaScript's 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 a large language model outputs text in a streaming manner, if JavaScript methods are frequently called to operate the DOM, the rendering performance of the page will be seriously affected, and the page operation will be blocked when the page is scrolling. Summary of the invention

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

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

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

[0007] A third aspect of the present application is to provide an electronic device.

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

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

[0010] To achieve the above-mentioned purpose, the first embodiment of the present application proposes a message display method, including:

[0011] Determine and generate a corresponding first message element for layout in a 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 opening of a chat page by the user;

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

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

[0014] According to the reverse order of the timestamps of the chat messages in the target conversation, the message elements corresponding to the chat messages are laid out and rendered in the message container from bottom to top, and the placeholder elements are laid out and rendered at the top of the message container.

[0015] To achieve the above-mentioned purpose, the second embodiment of the present application proposes a message display device, including:

[0016] A first determination module, configured to determine and generate a corresponding first message element for layout in a 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 opening of a chat page by the user;

[0017] An acquisition module, used for acquiring a second message element corresponding to a historical chat message before the latest chat message in the target conversation;

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

[0019] The first processing module is used to layout and render the message elements corresponding to each chat message in the message container in reverse order from bottom to top according to the timestamps of the chat messages in the target conversation, and to layout and render the placeholder element at the top of the message container.

[0020] To achieve the above-mentioned purpose, the third aspect of the present application provides an electronic device, including:

[0021] A processor, and a memory communicatively connected to the processor;

[0022] The memory stores computer-executable instructions;

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

[0024] In order to achieve the above-mentioned purpose, the fourth aspect embodiment of the present application proposes a non-transitory computer-readable storage medium storing computer instructions, wherein the computer instructions are used to enable a computer to execute the message display method described in the first aspect.

[0025] In order to achieve the above-mentioned purpose, the fifth aspect of the present application proposes a computer program product, including a computer program, which implements the message display method described in the first aspect when executed by a processor.

[0026] The message display method of the present application determines and generates a corresponding first message element for layout to a 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 the user opens a chat page; 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 attribute information of the first message element, the second message element and the message container; and layouts and renders the message elements corresponding to each chat message in the message container in a reverse order from bottom to top according to the timestamps of each chat message in the target conversation, and layouts and renders the placeholder element at the top of the message container. Thus, there is no need to use the JavaScript method, but to use pure CSS (Cascading Style Sheets) attributes to achieve the goal of displaying the latest chat message at the bottom of the message container, without considering the performance overhead caused by JavaScript operating the DOM, thereby improving the performance of page rendering.

[0027] Additional aspects and advantages of the present application will be given in part in the description below, and in part will become apparent from the description below, or will be learned through the practice of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

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

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

[0030] Figure 2 A schematic diagram of a chat page provided for this 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 diagram provided for this application;

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

[0035] Figure 7 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0036] Embodiments of the present application are described in detail below, and examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar 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 be used to explain the present application, and should not be construed as limiting the present application.

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

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

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

[0040] Among them, the scroll bar is controlled by operating the scrollTop property of the element or using the scrollY property of the window object, so the Web APIs such as scrollIntoView and setScrollTop are used, or the values ​​of the scrollTop and scrollY properties are directly changed to control the scroll bar.

[0041] Using the above method to automatically scroll to the bottom of the viewport has the following disadvantages:

[0042] 1. While the model is outputting a piece of text, a large number of JavaScript script operations are executed. Since JavaScript is single-threaded, other page events will be blocked when JavaScript scripts are executed.

[0043] 2. After the scroll bar appears in the viewport, the JavaScript script pulls the scroll bar to the bottom of the viewport. This is an event in which JavaScript directly operates DOM elements, which will consume the browser's rendering performance.

[0044] The following describes a message display method, device, electronic device and storage medium according to an embodiment of the present application with reference to the accompanying drawings.

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

[0046] The embodiment of the present application takes the message display method being configured in a message display device as an example. The message display device can be applied to any electronic device so that the electronic device can perform a message display function.

[0047] Among them, the electronic device can be any device with computing capabilities, such as a personal computer, a mobile terminal, a server, etc. The mobile terminal can be, for example, a mobile phone, a tablet computer, a personal digital assistant, a wearable device, and other hardware devices with various operating systems, touch screens and / or display screens.

[0048] like Figure 1 As shown, the method comprises the following steps:

[0049] Step 101, according to the message content of the latest chat message in the target conversation, determine and generate a corresponding first message element for layout in a message container.

[0050] The target conversation is a conversation started in response to the user opening the chat page at any time.

[0051] The message content may include but is not limited to text, emoticons, links, pictures, etc., and this application does not impose any restrictions on this.

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

[0053] Step 102: Obtain a second message element corresponding to a historical chat message before the latest chat message in the target conversation.

[0054] It is understandable that, in the target conversation, there may be a historical chat message before the latest chat message. It should be noted that the present application does not limit the number of historical chat messages.

[0055] In an embodiment of the present application, a second message element corresponding to a historical chat message before a latest chat message in a target conversation may 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. In this way, the second message element of the historical chat message can be quickly accessed.

[0057] In a possible implementation method of an embodiment of the present application, after generating a first message element corresponding to the latest chat message, it can be determined whether there is a historical chat message before the latest chat message in the target conversation. Thus, if there is a historical chat message, a second message element corresponding to the historical chat message before the latest chat message in the target conversation is obtained.

[0058] Step 103: Determine and generate a placeholder element based on the attribute information of the first message element, the second message element and the message container.

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

[0060] It should also be noted that the attribute information of the message container may also include other information, which is not limited in this application.

[0061] In an embodiment of the present application, a placeholder element is used to indicate an element that does not contain the message content of a chat message of a target conversation; for example, the placeholder element may be a blank element; for another example, it may be an element that contains a message other than the message content of a chat message of the target conversation, for example, it may include promotional information, prompt information, etc.

[0062] It is understandable that the attribute information (such as size and style) of the placeholder element can be determined according to 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 a situation where there is no historical chat message in the target conversation. Therefore, in a possible implementation of the embodiment of the present application, when there is no historical chat message, 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, in the reverse order of the timestamps of the chat messages in the target conversation, the message elements corresponding to the chat messages are laid out and rendered in the message container from bottom to top, and the placeholder elements are laid out and rendered at the top of the message container.

[0065] In an embodiment of the present application, each chat message in the target conversation may include the latest chat message and the historical chat message. It can be understood that each chat message in the target conversation may have a corresponding timestamp.

[0066] In an embodiment of the present application, the message elements corresponding to each chat message are laid out and rendered in the message container in reverse order from bottom to top according to the timestamps of each chat message in the target conversation, and the 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, and the latest chat message is message 3, then according to the reverse order of the timestamps of the above chat messages, the chat messages are sorted as message 3, message 2, and message 1. Then, in the message container, the message elements corresponding to message 3, the message elements corresponding to message 2, and the message elements corresponding to message 1 are laid out and rendered in order from bottom to top, and a 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). According to the above method, the chat page obtained is as follows: Figure 2 shown.

[0068] The message display method of the embodiment of the present application determines and generates a corresponding first message element for layout to a 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 a user opens a chat page; 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 attribute information of the first message element, the second message element and the message container; and layouts and renders the message elements corresponding to each chat message in the message container in a reverse order from bottom to top in the message container according to the timestamps of each chat message in the target conversation, and layouts and renders the placeholder element at the top of the message container. Thus, there is no need to use the JavaScript method, but to use pure CSS (Cascading Style Sheets) attributes to achieve the goal of displaying the latest chat message at the bottom of the message container, without considering the performance overhead caused by JavaScript operating the DOM, thereby improving the performance of page rendering.

[0069] In order to clearly explain how to determine and generate a placeholder element based on the attribute information of the first message element, the second message element and the message container in the above embodiment of the present application, the present application also proposes a message display method.

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

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

[0072] Step 301, according to the text content of the latest chat message in the target conversation, determine and generate a corresponding first message element for layout in a message container.

[0073] Step 302: Obtain a second message element corresponding to a historical chat message before the latest chat message in the target conversation.

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

[0075] Step 303: Determine a 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 : Compare the target height with the message displayable height of the message container to determine whether to generate a placeholder element based on the comparison result.

[0078] In the embodiment of the present application, the target height and the message displayable height of the message container may be compared to obtain a comparison result, and thus, it may be determined whether to generate a placeholder element based on the comparison result.

[0079] As a possible implementation method, when the comparison result indicates that the target height is less than the displayable message height of the message container, it is determined to generate a placeholder element. It should be noted that when the comparison result indicates that the target height is less than the displayable message height of the message container, it indicates that there is an area in the message container that can be used to layout the placeholder element. Therefore, it is determined to generate a placeholder element. Thus, the generated placeholder element facilitates the subsequent direct layout of each element in the message container in order, without consuming computing resources to design the layout position of each element in the message container.

[0080] In another possible implementation of the embodiment 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 a 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 there is no area in the message container that can be used to layout the placeholder element. At this time, it can be determined not to generate a placeholder element.

[0081] Step 305 : in the case where it is determined to generate a placeholder element, a first height is determined based on the target height and the message displayable height of the message container.

[0082] As an example, when it is determined to generate a placeholder element, the difference between the message displayable height of the message container and the target height may be determined as the first height.

[0083] Step 306: Determine a 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 the height in the first size; and the width in the first size is determined based on the message displayable height of the message container and the set page margin.

[0086] Step 307: Generate a placeholder element according to the first size.

[0087] In the embodiment of the present application, after the first size is determined, a placeholder element having a size of the first size may be generated according to the first size.

[0088] Step 308, in the reverse order of the timestamps of the chat messages in the target conversation, the message elements corresponding to the chat messages are laid out and rendered in the message container from bottom to top, 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 embodiment of the present application and will not be repeated here.

[0090] In a possible implementation method of an embodiment 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 each chat message can be arranged in sequence from bottom to top in the message container in reverse order of the timestamps of each chat message in the target conversation; based on the message displayable height of the message container and the height of the message elements corresponding to each chat message, the visible and invisible parts of the message elements corresponding to each chat message are determined; finally, the visible part can be rendered in the message container, and the invisible part can be hidden.

[0091] In this way, the visible and invisible parts of the message elements corresponding to each chat message of the target conversation can be effectively determined, so that the chat messages can be efficiently displayed in a 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 no placeholder element will be generated, and the message elements corresponding to each chat message can be arranged in sequence from bottom to top in the message container in reverse order of the timestamps of each chat message in the target conversation.

[0093] Since there may be hidden parts, in order to facilitate the acquisition of chat messages of the complete target conversation, further, in a possible implementation method of an embodiment 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 based on the value of the scroll distance setting, the scroll bar element is laid out and rendered.

[0094] The value of the scroll distance setting may be, for example, 0, whereby the latest chat message may be displayed at the bottom of the message container.

[0095] Therefore, the scroll bar is relied upon to monitor the scrolling events, so as to realize dynamic loading and dynamic adjustment of the message content.

[0096] The message display method of 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 to determine whether to generate a placeholder element based on the comparison result; in the case of determining to generate a placeholder element, determines the first height based on the target height and the message displayable height of the message container; determines the first size based on the first height and the message displayable width of the message container; generates a placeholder element based on the first size. Thus, it is possible to effectively determine whether to generate a placeholder element 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 in the case of determining to generate a placeholder element, the generation of the placeholder element is realized.

[0097] In order to clearly explain how, in any of the above embodiments of the present application, a corresponding first message element for layout in a message container is determined and generated based on the text content of the latest chat message in the target conversation, the present application also proposes a message display method.

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

[0099] like Figure 4 As shown, the method comprises the following steps:

[0100] Step 401, obtaining the height and number of bytes of a message that can be displayed in one line of a message container.

[0101] Step 402, based on the text content of the latest chat message in the target conversation and the number of bytes of the message that can be displayed in one line of the message container, determine the number of lines occupied by the text content of the latest chat message.

[0102] As an example, when the text content of the latest chat message in the target conversation does not contain a multi-level title, the total number of bytes corresponding to the latest chat message is determined based on the text content of the minimum chat message; the number of lines occupied by the text content of the latest chat message is determined based on the total number of bytes corresponding to the latest chat message and the number of bytes of the message that can be displayed in one line of the message container.

[0103] As another example, when the text content of the latest chat message in the target conversation contains multi-level 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 that can be displayed in one line of the message container; finally, the number of lines occupied by each text paragraph and the number of title lines are added to obtain the target number of lines, and the target number of lines is used as the number of lines occupied by the text content of the latest chat message.

[0104] Step 403, determine the target size according to the height of one 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 one 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 used as the target size.

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

[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: Obtain a second message element corresponding to a historical chat message before the latest chat message in the target conversation.

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

[0110] Step 407, in the reverse order of the timestamps of the chat messages in the target conversation, the message elements corresponding to the chat messages are laid out and rendered in the message container from bottom to top, and the placeholder element is laid out and rendered 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 and will not be repeated here.

[0112] The message display method of the embodiment of the present application obtains the height and number of bytes of the message that can be displayed in one line of the message container; determines the number of lines 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 number of bytes of the message that can be displayed in one line of the message container; determines the target size based on the height of one line of the message container, the number of lines occupied by the text content of the latest chat message and the width of the message container; generates the first message element based on the text content of the latest chat message and the target size. Thus, based on the height and number of bytes of the message that can be displayed in one line of the message container, the determination and generation of the first message element laid out to the message container can be achieved.

[0113] In order to clearly illustrate the message display method of this application, the following is a detailed description with examples.

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

[0115] 1. Set the message container to "elastic layout", where the height of the message container is fixed, the vertical excess is set to scroll, and the layout direction of the elements in the message container included in the message container is set to vertical and arranged from bottom to top.

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

[0117] Thus, an elastic height container is defined, wherein the elastic height container includes two sub-elements, namely a message container and an adaptive height module (marked as a placeholder element in this application).

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

[0119] For example, according to the order of the timestamps of the chat messages, the chat messages in the target conversation are sorted as message 1, message 2, ..., message n, then "message 1" is stored in the message array header, and "message 2" is stored in the message data header to form an array ["message 1", "message 2"], and so on to form a message array of ["message 1", "message 2", ..., "message n"].

[0120] 4. Bind the message array to the message element in the message container.

[0121] Specifically, 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.

[0122] It should be noted that when there are not enough message elements, the highly adaptive module and the message elements fill the message container together. At this time, no vertical scroll bar is arranged in the message container. Figure 2 As shown; when there are enough message elements, the height of the height adaptive module is compressed to 0. At this time, the sum of the heights of the message elements, that is, the target height, is greater than or equal to the message display height of the message container. At this time, the vertical scroll bar is laid out in the message container, as shown in Figure 5 shown.

[0123] When a vertical scroll bar is laid out in a message container, 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 always be displayed at the bottom of the message container. The method does not use JavaScript scripts and will not cause the problem of frequent execution of JavaScript scripts, thereby improving page performance and rendering efficiency.

[0125] With the above Figures 1 to 4 Corresponding to the message display method provided in the embodiment, the present application also provides a message display device. Figures 1 to 4 The message display method provided in the embodiment corresponds to the embodiment, so the implementation method of the message display method is also applicable to the message display device provided in the embodiment of the present application, and will not be described in detail in the embodiment of the present application.

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

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

[0128] Among them, the first determination module 601 is used to determine and generate a corresponding first message element for layout to 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 the user opens the chat page.

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

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

[0131] The first processing module 604 is used to layout and render the message elements corresponding to each chat message in the message container in a reverse order of the timestamps of each chat message in the target conversation from bottom to top, and to layout and render the placeholder element at the top of the message container.

[0132] In a possible implementation manner of an embodiment of the present application, the attribute information of the message container includes the message displayable height and the message displayable width of the message container; the second determination module 603 is used to: determine the 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 a placeholder element based on the comparison result; if it is determined to generate a placeholder element, determine the first height based on the target height and the message displayable height of the message container; determine the first size according to the first height and the message displayable width of the message container; and generate a placeholder element according to the first size.

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

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

[0135] The third determination module is configured to determine that it is not necessary to generate a placeholder element in response to the comparison result indicating that the target height is not less than the message displayable height of the message container.

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

[0137] A layout module is used to respond 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, and to layout the message elements corresponding to the chat messages in the target conversation in reverse order from bottom to top in the message container.

[0138] The fourth determination module is used to determine the visible part and the invisible part of 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 used to render the visible part in the message container and hide the invisible part.

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

[0141] The generating module is used 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.

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

[0143] In a possible implementation of an embodiment of the present application, the first determination module 601 is used to: obtain the height and number of bytes of messages that can be displayed in one line of the message container; determine the number of lines 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 number of bytes of messages that can be displayed in one line of the message container; determine the 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 the 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.

[0144] The message display device of the embodiment of the present application determines and generates a corresponding first message element for layout to a 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 a user opens a chat page; 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 attribute information of the first message element, the second message element and the message container; and layouts and renders the message elements corresponding to each chat message in the message container in a reverse order from bottom to top in the message container according to the timestamps of each chat message in the target conversation, and layouts and renders the placeholder element at the top of the message container. Thus, there is no need to use the JavaScript method, but to use pure CSS (Cascading Style Sheets) attributes to achieve the goal of displaying the latest chat message at the bottom of the message container, without considering the performance overhead caused by JavaScript operating the DOM, thereby improving the performance of page rendering.

[0145] Figure 7 A schematic diagram of the structure of an electronic device provided for another embodiment of the present application. Among them, the electronic device 700 in this embodiment is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workbenches, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present application described and / or required herein.

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

[0147] When the processor 720 executes the instructions, the message display method provided in the above embodiment is implemented.

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

[0149] The communication interface 730 is used for communication between the memory 710 and the processor 720 .

[0150] The memory 710 is used to store computer instructions that can be executed on the processor 720 .

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

[0152] The processor 720 is used to implement the message display method of the above embodiment 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 communicate with 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. 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 diagram, but this does not mean that there is only one bus or only one type of bus.

[0154] Optionally, in a 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 communicate with each other through an internal interface.

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

[0156] In order to implement the above embodiments, the present application also proposes a non-transitory computer-readable storage medium storing computer instructions, where the computer instructions are used to enable a computer to execute the above method.

[0157] In order to implement the above embodiments, the present application also proposes a computer program product, including a computer program, which implements the above method when executed by a processor.

[0158] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present application. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

[0159] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Therefore, the features defined as "first" and "second" may explicitly or implicitly include at least one of the features. In the description of this application, the meaning of "plurality" is at least two, such as two, three, etc., unless otherwise clearly and specifically defined.

[0160] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, fragment or portion of code comprising one or more executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present application includes alternative implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in the reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present application belong.

[0161] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute the instructions), or in combination with these instruction execution systems, devices or apparatuses. For the purpose of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in combination with these instruction execution systems, devices or apparatuses. More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or more wires (electronic device), a portable computer disk box (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), a fiber optic device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be paper or other suitable medium on which the program is printed, since the program may be obtained electronically, for example, by optically scanning the paper or other medium and then editing, interpreting or processing in other suitable ways if necessary, and then stored in a computer memory.

[0162] It should be understood that the various parts of the present application can be implemented by hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, multiple steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, it can be implemented by any one of the following technologies known in the art or their combination: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0163] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

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

[0165] It should be noted that in the embodiments of the present application, certain software, components, models and other existing solutions in the industry may be mentioned, and they should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of the present application, but it does not mean that the applicant has or will necessarily use the solution.

[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 limitations on the present application. Ordinary technicians in this field can change, modify, replace and modify the above embodiments within the scope of the present application.

Claims

1. A message display method, characterized in that: The method comprises: Determine and generate a corresponding first message element for layout in a 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 opening of a chat page by the user; Obtaining a second message element corresponding to a historical chat message before the latest chat message in the target conversation; Determine and generate a placeholder element based on the attribute information of the first message element, the second message element and the message container; According to the reverse order of the timestamps of the chat messages in the target conversation, the message elements corresponding to the chat messages are laid out and rendered in the message container from bottom to top, and the placeholder elements are laid out and rendered at the top of the message container.

2. The method according to claim 1, characterized in that The attribute information of the message container includes the message displayable height and message displayable width of the message container; The determining and generating a placeholder element based on the attribute information of the first message element, the second message element, and the message container includes: 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 a placeholder element based on the comparison result; In the case of determining to generate a placeholder element, determining a first height based on the target height and a message displayable height of the message container; Determine a first size according to the first height and a message displayable width of the message container; The placeholder element is generated according to the first size.

3. The method according to claim 2, characterized in that The determining whether to generate a placeholder element based on the comparison result includes: In response to the comparison result indicating that the target height is smaller than the message displayable height of the message container, it is determined to generate a placeholder element.

4. The method according to claim 2, characterized in that 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, it is determined not to generate a placeholder element.

5. The method according to claim 2, characterized in that: 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, the message elements corresponding to the chat messages in the target conversation are sequentially arranged in the message container from bottom to top in the reverse order of the timestamps of the chat messages in the target conversation; Determine the visible part and the invisible part of 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; The visible portion is rendered in the message container, and the invisible portion is hidden.

6. The method according to claim 5, characterized in that 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; Based on the value of the scroll distance setting, the scroll bar element is laid out and rendered.

7. The method according to any one of claims 1 to 6, characterized in that: The determining and generating, according to the message content of the latest chat message in the target conversation, a corresponding first message element for layout in the message container includes: Get the height and number of bytes of the message that can be displayed in one line of the message container; Determine the number of lines 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 number of bytes of the message that can be displayed in one line of the message container; Determine the 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 the message displayable width of the message container; The first message element is generated based on the message content of the latest chat message and the target size.

8. A message display device, characterized in that: The device comprises: A first determination module, configured to determine and generate a corresponding first message element for layout in a 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 opening of a chat page by the user; An acquisition module, used for acquiring a second message element corresponding to a historical chat message before the latest chat message in the target conversation; A second determining module, configured to determine and generate a placeholder element based on the attribute information of the first message element, the second message element and the message container; The first processing module is used to layout and render the message elements corresponding to each chat message in the message container in reverse order from bottom to top according to the timestamps of the chat messages in the target conversation, and to layout and render the placeholder element at the top of the message container.

9. The device according to claim 8, characterized in that The attribute information of the message container includes a message displayable height and a message displayable width of the message container; and the second determining module is used to: 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 a placeholder element based on the comparison result; In the case of determining to generate a placeholder element, determining a first height based on the target height and a message displayable height of the message container; Determine a first size according to the first height and a message displayable width of the message container; The placeholder element is generated according to the first size.

10. The device according to claim 9, characterized in that The second determining module is used to: In response to the comparison result indicating that the target height is smaller than the message displayable height of the message container, it is determined that a placeholder element needs to be generated.

11. The device according to claim 9, characterized in that The device also includes: The third determining module is configured to determine that it is not necessary to generate a placeholder element in response to the comparison result indicating that the target height is not less than the message displayable height of the message container.

12. The device according to claim 9, characterized in that The device also includes: a layout module, 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 being not less than the message displayable height of the message container, sequentially layout the message elements corresponding to the chat messages in the message container in a bottom-up order according to the reverse order of the timestamps of the chat messages in the target conversation; A fourth determination module, configured to determine a visible portion and an invisible portion of a message element corresponding to each of the chat messages based on a message displayable height of the message container and a height of a message element corresponding to each of the chat messages; The second processing module is used to render the visible part in the message container and hide the invisible part.

13. The device according to claim 12, characterized in that The device also includes: A generating module, 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 used to layout and render the scroll bar element based on the value set by the scroll distance.

14. The device according to any one of claims 8 to 13, characterized in that: The first determining module is used to: Get the height and number of bytes of the message that can be displayed in one line of the message container; Determine the number of lines 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 number of bytes of the message that can be displayed in one line of the message container; Determine the 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 the message displayable width of the message container; The first message element is generated based on the message content of the latest chat message and the target size.

15. An electronic device, characterized in that: include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to implement the method according to any one of claims 1 to 7.

16. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, which are used to implement the method according to any one of claims 1 to 7 when executed by a processor.

17. A computer program product, characterized in that The invention comprises a computer program which, when executed by a processor, implements the method according to any one of claims 1 to 7.

Images