fix: Fixed a bug where multi-line message data content is displayed i…

…ncorrectly (#206) - Fixed a bug where multi-line message data content is being displayed incorrectly (text overflow)
sendbird · May 10, 2024 · aca1030 · aca1030
1 parent 13a6b33
commit aca1030
Showing 1 changed file with 46 additions and 10 deletions.
diff --git a/src/components/MessageDataContent.tsx b/src/components/MessageDataContent.tsx
@@ -12,6 +12,20 @@ const Text = styled.div`
   font-weight: 500;
   line-height: 20px;
   letter-spacing: -0.1px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+  word-break: break-word;
+`;
+
+const TextButton = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.1px;
+  white-space: nowrap;
 `;
 
 const ViewDetails = styled.div`
@@ -45,20 +59,27 @@ const ViewDetails = styled.div`
   }
 `;
 
+const LineHeightWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 20px;
+`;
+
 const WorkFlowType = styled.div`
   border-radius: 2px;
   border: 1px solid #ccc;
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
   padding: 0 4px;
+  white-space: nowrap;
 `;
 
 const Root = styled.div`
   display: flex;
   justify-content: flex-start;
   margin-top: 16px;
-  margin-left: 36px;
+  padding-left: 36px;
 `;
 
 const SideBar = styled.div`
@@ -74,15 +95,16 @@ const DataContainer = styled.div`
   justify-content: flex-start;
   align-items: flex-start;
   gap: 4px;
-  width: 100%;
   margin-left: 16px;
+  flex: 1; // Without this, Sidebar width is reduced.
 `;
 
 const DataRow = styled.div`
   display: flex;
   justify-content: flex-start;
-  align-items: center;
+  align-items: flex-start;
   gap: 8px;
+  width: 100%;
 `;
 
 const AdditionalInfo = styled.div`
@@ -93,6 +115,14 @@ const AdditionalInfo = styled.div`
   margin-top: 5px;
 `;
 
+const Icon = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 20px;
+`;
+
 interface MessageDataContentProps {
   messageData: string;
 }
@@ -130,13 +160,12 @@ const INTENT_MAP = {
 };
 
 function isObjectOfViewDetailData(object: any): object is FunctionCallData {
-  const { name, request, response_text, status_code, url } = object ?? {};
+  const { name, request, response_text, status_code } = object ?? {};
   return (
     typeof name === 'string' &&
     typeof request === 'object' &&
     typeof response_text === 'string' &&
-    typeof status_code === 'number' &&
-    typeof url === 'string'
+    typeof status_code === 'number'
   );
 }
 
@@ -176,6 +205,7 @@ export default function MessageDataContent({
     try {
       const messageDataObject: MessageDataObject = JSON.parse(messageData);
       const functionCallsData = messageDataObject?.function_calls;
+
       if (
         Array.isArray(functionCallsData) &&
         functionCallsData.length > 0 &&
@@ -216,17 +246,23 @@ export default function MessageDataContent({
       <DataContainer>
         {workflow && (
           <DataRow>
-            <MessageBubbleIcon id="aichatbot-widget-ellipsis-icon" />
+            <Icon>
+              <MessageBubbleIcon id="aichatbot-widget-ellipsis-icon" />
+            </Icon>
             <Text>{workflow.name}</Text>
-            <WorkFlowType>{workflow.type}</WorkFlowType>
+            <LineHeightWrapper>
+              <WorkFlowType>{workflow.type}</WorkFlowType>
+            </LineHeightWrapper>
           </DataRow>
         )}
         {functionCalls.map((renderData, index) => (
           <DataRow key={index}>
-            <EllipsisIcon id="aichatbot-widget-message-bubble-icon" />
+            <Icon>
+              <EllipsisIcon id="aichatbot-widget-message-bubble-icon" />
+            </Icon>
             <Text>{renderData.name}</Text>
             <ViewDetails onClick={renderData.onClick}>
-              <Text>View details</Text>
+              <TextButton>View details</TextButton>
               <ChevronRightIcon id="aichatbot-widget-chevron-right-icon" />
             </ViewDetails>
           </DataRow>