{"name":"🍫짭카오톡 모듈🍫","description":"","id":"74cb99c8-6434-4fab-a5d9-edfe12d1c6b4","hideIcon":true,"regex":[{"comment":"[💻] Setup #1 - 태그 정렬","in":"<.*?>\\n^.*?{ *{ *(.*?) *} *}.*?$\\n<\\/.*?>|^.*?{ *{ *(.*?) *} *}.*?$","out":"{{$1$2}}\n\n\n","type":"editoutput","ableFlag":true,"flag":"gm"},{"comment":"[💻] Setup #2 - 유저 메세지 태그","in":"^%% *(.*)$","out":"{{{{user}}'s messages=\"$1\"}}\n\n\n","type":"editprocess","ableFlag":true,"flag":"gm"},{"comment":"[💻] Setup #3 - 유저 메세지","in":"^%%([^%].*?)(?:{{inlay::(.*?)}})?(?:\\[(.*?)\\])?$","out":"<style>\n/* 사용자 메시지 컨테이너 스타일 */\n.user-message-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  margin-right: -10px; /* 채팅창 위치를 조절합니다. margin 숫자 변경으로 위치 수정 가능합니다. */\n  margin-left: auto;\n  margin-top: 10px;\n  margin-bottom: -10px;\n}\n\n/* 메시지 버블 기본 스타일 */\n.user-message-bubble {\n  background-color: #fef01b; /* 배경색 설정 - 카카오톡 노란색. 수정시 하단의 꼬리와 동일하게 수정해주세요.*/\n  padding: 10px;\n  max-width: 70%;  /* 채팅창의 최대 너비입니다. 유저측은 70%로 모바일 피씨 동일합니다.*/\n  position: relative;\n  align-self: flex-end;\n}\n\n/* 메시지 텍스트 스타일 */\n.user-message-text {\n  color: black;\n  font-size: 0.8em; /* 기본 폰트 사이즈입니다. 모바일, PC 동일하게 적용됩니다. */\n  line-height: 1.4; /* 텍스트의 줄 간격입니다. */\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* 인레이 콘텐츠 스타일 */\n.inlay-content {\n  text-align: right;\n}\n\n/* 타임스탬프 스타일 */\n.user-timestamp {\n  color: #888; /* 타임스탬프의 색상입니다. 기본 회색입니다. 위치가 맞지 않으면 margin을 수정해주세요. */\n  position: absolute;\n  bottom: -23px; /* 타임스탬프 위치 조정 */\n  left: 0px;\n  white-space: nowrap;\n}\n\n/* PC 버전 스타일 (화면 너비 800px 이상) */\n.pc-style .user-message-bubble {\n  border-radius: 4px; /* 메세지 버블의 꼭지점 둥글기를 조절합니다. 클수록 동그랍니다. */\n}\n\n/* 메세지 버블의 꼬리입니다. 수정시 위치가 틀어질 수 있습니다. */\n.pc-style .user-message-bubble::after {\n  content: \"\";\n  position: absolute;\n  right: -10px;\n  top: 5px;\n  border-style: solid;\n  border-width: 10px 0 10px 20px;\n  border-color: transparent transparent transparent #fef01b; /* 꼬리 색상 설정 */\n}\n\n.pc-style .inlay-content {\n  max-width: 400px; /* PC 버전 인레이 최대 너비. 위치가 맞지 않으면 margin을 조절해주세요. */\n  margin-top: -20px;\n  margin-bottom: -25px;\n}\n.pc-style .user-timestamp {\n  font-size: 0.8em;\n}\n\n/* 모바일 버전 스타일 (화면 너비 800px 미만) */\n.mobile-style .user-message-bubble {\n  border-radius: 11px; /* 메세지 버블의 꼭지점 둥글기를 조절합니다. 클수록 동그랍니다. */\n}\n\n/* 메세지 버블의 꼬리입니다. 수정시 위치가 틀어질 수 있습니다. */\n.mobile-style .user-message-bubble::after {\n  content: \"\";\n  position: absolute;\n  right: -10px;\n  top: 5px;\n  border-style: solid;\n  border-width: 0px 3px 10px 20px;\n  border-color: transparent transparent transparent #fef01b; /* 꼬리 색상 설정. 메세지 버블과 동일하게 수정해주세요. */\n}\n\n.mobile-style .inlay-content {\n  max-width: 200px; /* 모바일 버전 인레이 최대 너비. 위치가 맞지 않으면 margin을 조절해주세요. */\n  margin-top: -20px; \n  margin-bottom: -25px;\n}\n\n.mobile-style .user-timestamp {\n  font-size: 0.7em;\n}\n</style>\n\n<!-- 화면 너비에 따라 PC 또는 모바일 스타일 적용. 800px 기준으로 구분. 캐릭터와 다르게 유저측은 아래 if문 두개만 수정하면 됩니다. 캐릭터와 동일하게 수정해주세요. -->\n{{#if {{? {{screen_width}} >= 800}} }}\n<div class=\"user-message-container pc-style\">\n{{/if}}\n\n{{#if {{? {{screen_width}} < 800}} }}\n<div class=\"user-message-container mobile-style\">\n{{/if}}\n\n  <div class=\"user-message-bubble\">\n    <div class=\"user-message-text\">$1</div>\n    <div class=\"user-timestamp\">$3</div> \n  </div>\n  \n  {{#if {{not_equal::$2::}}}}\n    <div class=\"inlay-content\">{{inlay::$2}}</div>\n  {{/if}}\n\n</div>\n<br>\n","type":"editdisplay","ableFlag":true,"flag":"gm"},{"comment":"[💻] Setup #4 - 캐릭터 메세지","in":"^{{(.*?)'s message *= *\"(.*?)\" *; *\"(.*?)\"}}(\\n*)(?:<(.+?)>)?","out":"<style>\n/* 전체 채팅 컨테이너 스타일 */\n.chat-container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px; /* 메시지 그룹 간 간격 */\n}\n\n/* 각 메시지 그룹의 레이아웃 */\n.message-group {\n  display: flex;\n  align-items: flex-start;\n}\n\n/* 프로필 이미지 열 스타일. margin 숫자 변경으로 위치 수정 가능합니다. */\n.profile-column {\n  margin-right: 12px;\n  margin-top: -30px;\n  margin-left: -30px;\n  flex-shrink: 0;\n}\n\n/* 프로필 이미지 스타일  */\n.profile-image {\n  border-radius: 50%; /* 100%(사각형)~50%(원형) */\n  object-fit: cover;\n}\n\n/* 메시지 내용 열 스타일 */\n.content-column {\n  flex-grow: 1;\n}\n\n/* 사용자 이름 스타일 */\n.username {\n  margin-bottom: 3px; /* 이름과 버블 사이의 간격을 조절합니다. */\n  color: black; \n}\n\n/* 메시지 버블 컨테이너 */\n.message-bubble-container {\n  position: relative;\n  display: inline-block;\n}\n\n/* 메시지 버블 기본 스타일 */\n.message-bubble {\n  background-color: white; /* 메세지 버블 색상 */\n  padding: 10px; /* 메세지 버블 내 텍스트와 테두리의 간격을 조절합니다. 작을수록 좁아집니다.*/\n  box-sizing: border-box;\n  position: relative;\n  display: inline-block;\n  font-size: 0.8em; /* 기본 폰트 사이즈입니다. 모바일, PC 동일하게 적용됩니다. */\n}\n\n/* 메시지 버블 꼬리 스타일 */\n.message-bubble::before {\n  content: \"\";\n  position: absolute;\n  border-style: solid;\n}\n\n/* 메시지 텍스트 스타일 */\n.message-text {\n  color: black;\n  line-height: 1.4; /* 텍스트의 줄 간격입니다. */\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* 타임스탬프 스타일 */\n.timestamp {\n  color: #888; /* 타임스탬프의 색상입니다. 기본 회색입니다. */\n  position: absolute;\n  right: 0px; /* 타임스탬프의 위치가 맞지 않으면 수정해주세요. */\n  bottom: -23px; /* 타임스탬프의 위치가 맞지 않으면 수정해주세요. */\n  white-space: nowrap;\n}\n\n/* 스티커 컨테이너 스타일 */\n.sticker-container {\n  /* 스티커 컨테이너에 대한 추가 스타일이 필요하면 여기에 작성하세요 */\n}\n\n/* PC 버전 스타일 (화면 너비 800px 이상) */\n.pc-style  {\n  max-width: 70%; /* 채팅창의 최대 너비입니다. */\n  margin-top: -30px; /* 채팅창사이의 간격을 조절합니다. 겹치거나 넓으면 수치를 조절해주세요. */\n}\n/* 프사의 크기입니다. 조절하면 위치가 틀어질 수 있습니다. */\n.pc-style .profile-image {\n  width: 70px; \n  height: 70px; \n}\n.pc-style .username {\n  margin-bottom: -2px;\n  color: black;\n  font-size: 0.9em;\n}\n.pc-style .message-bubble {\n  border-radius: 4px; /* 메세지 버블의 꼭지점 둥글기를 조절합니다. 클수록 동그랍니다. */\n}\n/* 메세지 버블의 꼬리입니다. 수정시 위치가 틀어질 수 있습니다. */\n.pc-style .message-bubble::before {\n  top: 5px;\n  left: -10px;\n  border-width: 10px 20px 10px 0;\n  border-color: transparent white transparent transparent;\n}\n.pc-style .timestamp {\n  font-size: 0.8em;\n}\n/* 에셋 이미지의 크기를 조절할 수 있습니다. */\n.pc-style .sticker-image {\n  max-width: 300px;\n  max-height: 300px;\n}\n\n/* 모바일 버전 스타일 (화면 너비 800px 미만) */\n.mobile-style {\n  max-width: 80%;\n  margin-top: -50px;\n}\n/* 모바일 버전 프사 사이즈 조절 */\n.mobile-style .profile-image {\n  width: 42px;\n  height: 42px;\n}\n.mobile-style .username {\n  margin-bottom: -2px;\n  color: black;\n  font-size: 0.8em;\n}\n/* 모바일 버전 꼭지점 둥글기 */\n.mobile-style .message-bubble {\n  border-radius: 11px;\n}\n/* 모바일 버전 메세지 버블 꼬리 */\n.mobile-style .message-bubble::before {\n  top: 5px;\n  left: -10px;\n  border-width: 0px 20px 10px 3px;\n  border-color: transparent white transparent transparent;\n}\n.mobile-style .timestamp {\n  font-size: 0.7em;\n}\n/* 모바일 버전 에셋 이미지 사이즈 조절 */\n.mobile-style .sticker-image {\n  max-width: 150px;\n  max-height: 150px;\n}\n</style>\n\n<!-- 화면 너비에 따라 PC 또는 모바일 스타일 적용. 800이 기본이며, 수정시 최하단의 if문도 수정하셔야 합니다. -->\n{{#if {{? {{screen_width}} >= 800}} }}\n<div class=\"chat-container pc-style\">\n{{/if}}\n\n{{#if {{? {{screen_width}} < 800}} }}\n<div class=\"chat-container mobile-style\">\n{{/if}}\n\n  <div class=\"message-group\">\n    <div class=\"profile-column\">\n      <img src=\"{{raw::[profile]}}\" alt=\"Profile\" class=\"profile-image\">\n    </div>\n    <div class=\"content-column\">\n      <div class=\"username\">$1</div>\n      <div class=\"message-bubble-container\">\n        <div class=\"message-bubble\">\n          <div class=\"message-text\">$2</div>\n        </div>\n        <div class=\"timestamp\">{{time::YYYY-MM-DD HH:mm}}</div>\n      </div>\n      {{#if {{not_equal::$5::}}}}\n      <div class=\"sticker-container\">\n        <img src=\"{{raw::$5}}\" alt=\"Sticker\" class=\"sticker-image\">\n      </div>\n      {{/if}}\n    </div>\n  </div>\n</div>\n$4\n<!-- 모바일 버전에서 메시지 그룹 간 간격 추가 -->\n{{#if {{? {{screen_width}} < 800}} }}\n<br>\n{{/if}}\n","type":"editdisplay","ableFlag":true,"flag":"gim"}],"lorebook":[{"key":"","comment":"▼ MES 로어북 ▼ 작동 안되면 메인 프롬프트로 옮기세요!","content":"","mode":"normal","insertorder":100,"alwaysActive":false,"secondkey":"","selective":false,"useRegex":false,"bookVersion":2},{"key":"@@","comment":"[🔗] 선택 #1 - 메세지 ( 스티커 X )","content":"### Message mode\n- Characters including {{char}} must respond instantaneously to messages from {{user}}, as if in real-time chat. Responses should have the exact same timestamp as {{user}}'s message, with zero delay. Use various communication methods (e.g. smartphones, texts, magic) appropriate to the world setting. Messages can include text content, image emojis. It is crucial that {{char}}'s response appears to be sent at the precise moment {{user}} sends their message, simulating immediate back-and-forth conversation.\n\n#### Format:\n{{<name>'s message=\"<message content>\";\"<YYYY.MM.DD | Weekday abbr. | HH:MM AM/PM>\"}}\n\n#### Correct usage example:\n{{Hina's message=\"Oh, hey there handsome! 😘\";\"2023.10.01 | Sun | 2:15 PM\"}}\n","mode":"normal","insertorder":100,"alwaysActive":false,"secondkey":"","selective":false,"useRegex":false,"bookVersion":2},{"key":"@@","comment":"[🔗] 선택 #2 - 메세지 ( 스티커 O )","content":"### Message Mode\n- Characters including {{char}} must respond instantaneously to messages from {{user}}, as if in real-time chat. Responses should have the exact same timestamp as {{user}}'s message, with zero delay. Use various communication methods (e.g. smartphones, texts, magic) appropriate to the world setting. Messages can include text content, image emojis, and one image sticker. It is crucial that {{char}}'s response appears to be sent at the precise moment {{user}} sends their message, simulating immediate back-and-forth conversation.\n\n- Important: Stickers can be selected from the provided list, and only one sticker per message can be used. Strictly adhere to the given format and sticker names.\n\n#### Format:\n{{<name>'s message=\"<message content>\";\"<YYYY.MM.DD | Weekday abbr. | HH:MM AM/PM>\"}}\n<sticker name>\n- Sticker List: (이 목록을 수정하세요)\n\n#### Correct usage example:\n{{Hina's message=\"Oh, hey there handsome! 😘\";\"2023.10.01 | Sun | 2:15 PM\"}}\n<Hinaring.png>\n\n","mode":"normal","insertorder":100,"alwaysActive":false,"secondkey":"","selective":false,"useRegex":false,"bookVersion":2},{"key":"","comment":"▲ 사용하지 않는 로어북 활성화 키는 지워주세요!! ▲","content":"","mode":"normal","insertorder":100,"alwaysActive":false,"secondkey":"","selective":false,"useRegex":false,"bookVersion":2}],"trigger":[{"comment":"","type":"start","conditions":[],"effect":[{"type":"triggerlua","code":"listenEdit(\"editInput\", function(triggerId, data)\n    local now = os.date(\"*t\")\n    local lines = {}\n    for line in data:gmatch(\"[^\\r\\n]+\") do\n        table.insert(lines, \"%%\"..line)\n    end\n    local newData = table.concat(lines, \"\\n\")..\"[\"..getCurrentTime(now)..\"]\"\n    return newData\nend)\n\nfunction getCurrentTime(now)\n    now = now or os.date(\"*t\")\n    local year = now.year\n    local month = string.format(\"%02d\", now.month)\n    local day = string.format(\"%02d\", now.day)\n    local dayOfWeek = os.date(\"%a\", os.time(now))\n    local hours = now.hour % 12 == 0 and 12 or now.hour % 12\n    local minutes = string.format(\"%02d\", now.min)\n    local ampm = now.hour >= 12 and 'PM' or 'AM'\n    local formattedTime = string.format(\"%d:%s %s\", hours, minutes, ampm)\n    \n    local formattedDate = string.format(\"%d-%s-%s | %s | %s\", year, month, day, dayOfWeek, formattedTime)\n    return formattedDate\nend"}]}],"lowLevelAccess":false,"type":"risuModule","creator_notes":"리스 UI를 카카오톡 느낌으로 바꿔줍니다.\nThanks to original mode: https://arca.live/b/characterai/87564945\nLua Script from https://arca.live/b/characterai/111139736\ntip to apply both PC and mobile UI: https://arca.live/b/characterai/111062308\nand many other Jongwons.","tags":[],"license":"CC BY-NC-SA 4.0","rtype":"module"}